CODEWITHSUNDEEP
angularjs
Dixit
Dixit

Reputation: 1379

Bind Value in ng-model through ng-repeat

I am not able to fetch value in my ng-model when checkbox is selected or not.

config.previewData[0] = {"Country":"Hong Kong","Level":0,"TonerQty":23166}

my html code like 

<div ng-repeat="(key, val) in config.previewData[0]">

    <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="config.Selectedkey[$index]" name="group" id="{{$index}}" />
        {{key}}
    </label>
</div>

but in config.Selectedkey[$index] nothing is bind when i click on check box.

Upvotes: 0

Views: 44

Answers (2)

Sreekanth
Sreekanth

Reputation: 3130

Basically, when you use ng-repeat, it creates it own scope with in the repeat. So, when you want to access the parent scope / use the model which is inside the repeat, you need to use controller as syntax / use $parent.

I changed it to use ControllerAs syntax and it started working.

More about ng-repeat

var app = angular.module('sampleApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.previewData = [{
    "Country": "Australia",
    "TonerQty": 4,
    "TonerQty1": 720
  }, {
    "Country": "Australia",
    "TonerQty": 1,
    "TonerQty1": 20839
  }, {
    "Country": "Australia",
    "TonerQty": 3,
    "TonerQty1": 639
  }, {
    "Country": "Australia",
    "TonerQty": 12,
    "TonerQty1": 36
  }, {
    "Country": "Australia",
    "TonerQty": 0,
    "TonerQty1": 0
  }, {
    "Country": "Australia",
    "TonerQty": 6,
    "TonerQty1": 396
  }, {
    "Country": "Australia",
    "TonerQty": 8,
    "TonerQty1": 24
  }, {
    "Country": "Australia",
    "TonerQty": 5,
    "TonerQty1": 495
  }, {
    "Country": "Australia",
    "TonerQty": 10,
    "TonerQty1": 180
  }, {
    "Country": "Australia",
    "TonerQty": 2,
    "TonerQty1": 1452
  }];

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="MainCtrl as mc">
    <div ng-repeat="(key, val) in previewData[0]">

      <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="mc.Selectedkey[$index]" name="group" id="{{$index}}" />{{key}}
      </label>
    </div>
    {{mc.Selectedkey}}
  </div>
</div>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Please modify your JSON as 

config.previewData[0] = {"Country":"Hong Kong",
                         "Level":0,
                         "TonerQty":23166, 
                         "Selectedkey": false}

Your JSON data does not contain a key called Selectedkey thats why you cant read the model value.

Also replace the template as

<div ng-repeat="(key, val) in config.previewData">
    <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="config.Selectedkey[$index]" name="group" id="{{$index}}" />
        {{key}}
    </label>
</div>

Because you are looping through config.previewData not config.previewData[0]

Please find the sample code attached.

<!DOCTYPE html>
<html ng-app="TestApp">

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
        var myApp = angular.module('TestApp', []);

        myApp.controller('TestAppCtrl', ['$scope', function ($scope) {

            $scope.previewData = '[{"Country":"Australia","TonerQty":4,"TonerQty1":720,"Selectedkey":false},{"Country":"Australia","TonerQty":1,"TonerQty1":20839,"Selectedkey":false},{"Country":"Australia","TonerQty":3,"TonerQty1":639,"Selectedkey":false},{"Country":"Australia","TonerQty":12,"TonerQty1":36,"Selectedkey":false},{"Country":"Australia","TonerQty":0,"TonerQty1":0,"Selectedkey":false},{"Country":"Australia","TonerQty":6,"TonerQty1":396,"Selectedkey":false},{"Country":"Australia","TonerQty":8,"TonerQty1":24,"Selectedkey":false},{"Country":"Australia","TonerQty":5,"TonerQty1":495,"Selectedkey":false},{"Country":"Australia","TonerQty":10,"TonerQty1":180,"Selectedkey":false},{"Country":"Australia","TonerQty":2,"TonerQty1":1452,"Selectedkey":false}]';

            $scope.previewData = JSON.parse($scope.previewData);
        }]);
    </script>

</head>

<body ng-controller="TestAppCtrl">
    <div ng-repeat="(key, val) in previewData">

        <label class="checkbox" for="{{$index}}">
            <input type="checkbox" ng-model="Selectedkey" name="group" id="{{$index}}" /> {{key}} - {{Selectedkey}}
        </label>
    </div>
</body>

</html>

Upvotes: 0

Related Questions