Angularjs访问范围

Question

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

一旦以HTML显示页面，就会有两列称为规则和服务器名称，它们具有复选框输入字段。我试图做的是，当点击复选框时，它会根据此属性check = !check创建true或false变量。我想访问在ngRepeat范围内创建的那些对象。我不确定我如何通过AngularJS实现这一点。我知道我可以用JQuery，但我试图用AJS来解决它。

任何帮助让我朝正确的方向将有很大帮助。 :)

以下是我的代码，这里是我的JSFiddle link。

角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-模型的选中状态。

设置“勾选”在您输入的规则和使用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变量以使其正常工作。