Question

我的代码的工作方式是，我有一个表，该表显示模块列表以及其左侧的复选框。最初，我的val（在控制器内部）为空白。因此，指令表中不会显示任何行。

但是，当我在表中选择一个模块值时，具有我单击的模块值的子模块会在指令表中显示（因为它更改了val的值），并且复选框也指向了它。一侧设置为禁用。

现在，当我单击的模块旁边的复选框被选中时，相应的值$scope.WW或$scope.APS等将变为true。但是，当它变为true时，指令表复选框将不会启用，因为在ng-disabled中，我给出的条件为submod.mod。因此，我希望每当WW或APS等值变为true时，这些值也会被禁用。但这不会发生。请帮忙。

以下是我的控制器，其中定义了我的数据以及将要使用的功能：

app.controller('aCtrl', function($scope) {
                $scope.values = [{"name" : "1" , "mod" : "WW" , "selected" : false},
                    {"name" : "2" , "mod" : "WW" , "selected" : false},
                    {"name" : "3" , "mod" : "WW" , "selected" : false},
                    {"name" : "4" , "mod" : "WW" , "selected" : false},
                    {"name" : "5" , "mod" : "WW" , "selected" : false},
                    {"name" : "6" , "mod" : "WW" , "selected" : false},
                    {"name" : "7" , "mod" : "APS" , "selected" : false},
                    {"name" : "8" , "mod" : "APS" , "selected" : false},
                    {"name" : "9" , "mod" : "APS" , "selected" : false},
                    ...
                ];
                $scope.val = "";
                $scope.WW = false; ... ;$scope.APS = false;

                function tester(param) {
                    $scope.val = param;
                }

                function modifyValues(param , sel) {
                    for (var i = 0; i < $scope.values.length; ++i) {
                        if (param == $scope.values[i].mod) {
                            $scope.values[i]["selected"] = sel;
                        }
                    }
                }

                function deselect(param) {
                    console.log(param);
                    if (param == 'WW') {
                        $scope.WW=false;
                        console.log("Triggered WW");
                    }  
                    else if (param == 'APS') {
                        $scope.AG=false;
                        console.log("Triggered AG");
                    }
                    ...
                    ...
                    ...
                    else if (param == 'USERSPACE') {
                        $scope.USERSPACE=false;
                        console.log("Triggered USERSPACE")
                    }
                    else
                        console.log('Bhaad me jaao')
                }

                $scope.deselect = deselect;
                $scope.modifyValues = modifyValues;
                $scope.tester = tester;
            })

这是我的应用程序的正文：

<body ng-app="anApp" ng-controller='aCtrl'>
        <table border="1">
            <tr>
                <td>Check</td>
                <td>Module</td>
                <td>Last Start TS</td>
                <td>Last End TS</td>
                <td>Log</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='WW' ng-click="modifyValues('WW' , !WW)"></td>
                <td><a ng-click="tester('WW')">WW</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='EMA' ng-click="modifyValues('EMA' , !EMA)"></td>
                <td><a ng-click="tester('EMA')">EMA</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='APN' ng-click="modifyValues('APN' , !APN)"></td>
                <td><a ng-click="tester('APN')">APN</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='APS' ng-click="modifyValues('APS' , !APS)"></td>
                <td><a ng-click="tester('APS')">APS</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='AG' ng-click="modifyValues('AG' , !AG)"></td>
                <td><a ng-click="tester('AG')">AG</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='USERSPACE' ng-click="modifyValues('USERSPACE' , !USERSPACE)"></td>
                <td><a ng-click="tester('USERSPACE')">USERSPACE</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td><input type='checkbox' ng-model='OTHER' ng-click="modifyValues('OTHER' , !OTHER)"></td>
                <td><a ng-click="tester('OTHER')">OTHER</a></td>
                <td>Today</td>
                <td>Today</td>
                <td>Hello</td>
            </tr>
        </table>
        <br>
        <my-table array="values" value="val"></my-table>
    </body>

注意指令my-table。定义如下：

app.directive('myTable' , function() {
                return {
                    restrict: 'E',
                    scope: {
                        array: '=',
                        value: '='
                    },
                    templateUrl: 'template.html'
                }
            });

其模板为：

<table ng-controller='aCtrl' border="1" ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶a̶l̶u̶e̶"̶ >
    <tr>
        <td>Check</td>
        <td>Submodule</td>
    </tr>
    <tr ng-repeat="submod in array" ng-if="submod.mod == value">
        <td>
            <input type="checkbox" name="submodule" value="{{submod.name}}"
                   ng-model="submod.selected" ng-click="deselect(submod.mod)"
                   ng-disabled="submod.mod">
        </td>
        <td>{{submod.name}}</td>
    </tr>
</table>

条件变为假时，无法启用ng-disabled

0 个答案: