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變量以使其正常工作。