Question

我是angularjs的新手，并且在我去的时候仍然学习所有的概念。我正在开发一个个人项目，它将使用angularjs获取json数据并将其显示在前端HTML页面上。

页面以HTML格式显示后，有两列名为rules和servername，其中包含复选框输入字段。我想要做的是，当单击该复选框时，它将根据此属性check = !check创建真或假变量。我想访问在ngRepeat范围内创建的那些对象。我不确定如何使用AngularJS实现这一目标。我知道我可以使用JQuery，但我想用AJS来解决它。

让我走向正确方向的任何帮助都会有很大帮助。：）

下面是我的代码，这是我的JSFiddle link。

Angular JS代码：

angular.module('ucmgmt', [])
    .controller('appsCtrl', function ($scope) {
    $scope.data = {
        "applications": [{
            "appname": "maps",
                "sitename": "maps.example.com",
                "rules": [
                "External_Under_Construction",
                "Internal_Under_Construction"]
        }, {
            "appname": "bing",
                "sitename": "bing.example.com",
                "rules": [
                "Bing_Under_Construction"]
        }]
    };
    $scope.process = function ($index) {
        console.log("item is checked." + $index);
    };
})

HTML代码

<div ng-app="ucmgmt">
    <div ng-controller="appsCtrl">
        <table class="tg">
            <tr>
                <th class="tg-031e">Appname</th>
                <th class="tg-yw4l">Sitename</th>
                <th class="tg-yw4l">Rule</th>
                <th class="tg-yw4l">ServerName</th>
                <th class="tg-yw4l">Status</th>
            </tr>
            <tbody ng-repeat="item in data">
                <tr ng-repeat="app in item">
                    <td class="tg-yw4l">{{app.appname}}</td>
                    <td class="tg-yw4l">{{app.sitename}}</td>
                    <td class="tg-yw4l">
                        <ul>
                            <li ng-repeat="rule in app.rules">
                                <input ng-click="check = !check" type="checkbox" value="{{rule}}">{{rule}}</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>
                                <input ng-click="check = !check; process($index)" type="checkbox" value="SERVER1">SERVER1</li>
                            <li>
                                <input ng-click="check = !check" type="checkbox" value="SERVER2">SERVER2</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>NA</li>
                            <li>NA</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

使用复选框时，在角度设置中，您可以通过ng-model处理检查状态。

将“check”设置为规则的属性，并在输入中使用ng-model：

<li ng-repeat="rule in app.rules">
    <input ng-model="rule.check" type="checkbox"></li>

然后，在您的ng-click中，您可以传递app和/或规则的实际值：

<input ng-model="app.server1.check" ng-click="process(app)" type="checkbox" value="SERVER1">SERVER1</li>

然后在您的控制器中，您将以这种方式访问该属性：

$scope.process = function (app) {
    // access your rules by an index of your repeater
    var ruleChecked = app.rules[index].check; // the check of "index" rule of above repeater
    var serverChecked = app.server1.check; // the value of the "server 1 checkbox"
}

此外，您还必须在每个app对象中初始化server1变量，以使其正常工作。

Angularjs访问范围

1 个答案: