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>

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. — mcgraphix
– mcgraphix, Commented Nov 25, 2015 at 19:12

Cyberdelphos · Accepted Answer · 2015-11-25 19:26:31Z

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.

edited Nov 25, 2015 at 19:26

answered Nov 25, 2015 at 19:19

Cyberdelphos

1,34414 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ray Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

Angularjs access scope

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related