Angularjs访问范围

Angularjs access scope

本文关键字：范围 访问 Angularjs      更新时间：2023-09-26

我是angularjs的新手，在学习的过程中仍在学习所有的概念。我正在做一个个人项目，该项目将使用angularjs获取json数据并将其显示在前端HTML页面上。

在HTML中显示页面后，有两列称为rules和servername，它们具有复选框输入字段。我想做的是，当单击复选框时，它将基于此属性check = !check创建true或false变量。我想访问那些在ngRepeat范围内创建的对象。我不确定如何使用AngularJS来实现这一点。我知道我可以使用JQuery，但我正在尝试使用AJS。

任何帮助我找到正确的方向都会有很大帮助

下面是我的代码，这里是我的JSFiddle链接。

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>

在angular中，当您使用复选框时，您可以通过ng模型处理选中的状态。

将"check"设置为规则的属性，并在输入中使用ng模型：

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

然后，在你的ng点击中，你可以传递应用程序和/或规则的实际值：

<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"
}

此外，您还必须初始化每个应用程序对象中的server1变量，以使其正常工作。

相关文章：