Angularjs access scope

Question

I am new to angularjs and still learning all the concepts as I go. I am working on a personal project that will use angularjs to get json data and display it to front end HTML page.

Once the page is displayed in HTML there are two columns called rules and servername that has checkbox input field. What I am trying to do is, when the checkbox is clicked, it will create true or false variable based on this attribute check = !check. I would like to access those objects that are created inside ngRepeat scope. I am not sure how I can achieve this with AngularJS. I know I can with JQuery, but I am trying to figure it out with AJS.

Any help getting me to right direction would help a lot. :)

Below is my code and here is my JSFiddle link.

Angular JS code:

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 Code

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

• mcgraphix: Inside your ng-repeat, you have access to the items that you are currently displaying as the variables "item" and "app". You can pass those in your process(app, item). Then in that function you will have the objects themselves to act upon.

Answer 1

In angular when you use checkboxes you handle the checked state via ng-model.

Set "check" as a property of rule and use ng-model in your input:

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

then, in your ng-click you can then pass the actual value of app and/or rule:

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

then in your controller you will have access to that property this way:

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

Also you will have to initialize server1 variable inside each of your app objects to make this work properly.

• Ray: Thanks @Cyberdelphos for your quick response. I also tried ng-model earlier before I started discussion at stackoverflow, but when I check the box, it throws me a readonly error message TypeError: Cannot assign to read only property 'check' of External_Under_Construction. link. JSFiddle has been updated with ng-model.
• Cyberdelphos: I see... the problem is that you're iterating over an array of strings. Modify your rules as an array of objects like "rules": [ {name:"External_Under_Construction", check: false}, {name: "Internal_Under_Construction", check: false}]; in order to initialize them as not checked. And then your template {{rule.name}}
• Cyberdelphos: Also, if you assign an angular variable to an html attribute, use the directive "ng-attr-value" as described here: docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
• Ray: Thanks Cyberdelphos. modified my json file and added check object and false value to it and worked very well. :) So AJS can't create new object inside an array once it is assigned to a variable?
• Cyberdelphos: In JS you can push an object inside an array, but you can't assign a new object property to a string, so we had to use an array of objects instead of strings.