以编程方式更改 ng-model 时未获取 ng-model 的更新值

Question

当我选中主复选框时，应选中所有子复选框，并且在选中复选框时也应显示它们的内容，否则不应显示它们的内容，但问题是子复选框已选中，但当我选中主复选框时，它们的内容不会显示，如果我手动选中子复选框，则会显示其内容。

<!DOCTYPE html>
    <html>
        <head>
            <title>Angular Demo</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        </head>
        <body data-ng-app="">
            <table>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="parent"/>
                    </td>
                    <td data-ng-show="parent" class="left">
                        It's master
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="child_1" data-ng-checked="parent"/>
                    </td>
                    <td data-ng-show="child_1">
                        It's child 1
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="child_2" data-ng-checked="parent"/>
                    </td>
                    <td data-ng-show="child_2">
                        It's child 2
                    </td>
                </tr>
            </table>
        </body>
    </html>

Answer 1

您没有与 child 模型交互 - 您是直接从 parent 设置选中的属性。

相反，为您的 parent 处理 ng-checked:

<input type="checkbox" data-ng-model="parent" ng-checked="parentChanged()"/>

并在您的控制器中将每个 child 的模型设置为 parent 值：

$scope.parentChanged = function(){
child_1 = parent;
child_2 = parent;
}

同时从您视图的 children 节点中删除数据-ng-checked="parent"。

<input type="checkbox" data-ng-model="child_1">
...
<input type="checkbox" data-ng-model="child_2">

Answer 2

您必须像这样设置属性 "child_1" :

<input type="checkbox" data-ng-model="child_1" data-ng-checked="child_1 = parent"/>

你可以看看怎么做：Here

Answer 3

我已经解决了这个问题。

<input type="checkbox" data-ng-model="parent" data-ng-change="child_1= parent;
                            child_2=parent;" />

请click在这里查看代码。

以编程方式更改 ng-model 时未获取 ng-model 的更新值

Not getting the updated value of ng-model when ng-model is changed programmatically

angularjs

angular-ngmodel