Access ng-model of element which is inside parent ng-repeat

Question

SORRY FOR THE TITLE

So, let me explain you my scenario

Firstly there is one parent ng-repeat
Inside parent ng-repeat I have 3 select options which are also loaded by ng-repeat

Problem I am facing is, I want to access ng-model of each select option and perform specific action on change. I tried setting ng-model but din't really worked well

Any suggestions are appreciated, really spent a lot time on this

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<style>

.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}


</style>
<div ng-app="myApp" ng-controller="myCtrl">

 <div class="box" ng-repeat="item in propertyData track by $index">
 <h2>{{item.propertyName}}</h2>
   <p>
   <label>Type of Riks {{$index}}</label>
   <select ng-model="a.modelRiskType" ng-change="riskTypeChange(riskType)">
   <option ng-repeat="singleItem in item.riskTypeData">{{singleItem.riskType}}</option>
   </select>
   <label>Type of damage {{$index}}</label>
   <select ng-model="b.modelDamageType">
   <option ng-repeat="singleItem in item.damageData">{{singleItem.damage}}</option>
   </select>
   <label>Type of Injury {{$index}}</label>
   <select ng-model="injury">
   <option ng-repeat="singleItem in item.injuryData">{{singleItem.injury}}</option>
   </select>
   </p>
 </div>
 
</div>

</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.propertyData = [
        {propertyName:'Header Data1',id:1},
        {propertyName:'Header Data2',id:2},
        {propertyName:'Header Data3',id:3},
        {propertyName:'Header Data4',id:4},
        
 ];
 $scope.riskTypeData = [
        {riskType:'movable',id:1},
        {riskType:'Immovable',id:2},
        {riskType:'NA',id:3},
];
$scope.damageData = [  
        {damage:'Own Damage',id:4},
        {damage:'Own Bodily Damage ',id:5},
        {damage:'Fire',id:6},
  {damage:'NA',id:6},
 ];
 
 $scope.injuryData = [  
        {injury:'Medical Expenses',id:4},
        {injury:'Critical Illness',id:5},
        {injury:'Death',id:6},
  {injury:'NA',id:6},
 ];
 $scope.modelRiskType = $scope.riskTypeData;
 $scope.modelDamageType = $scope.damageData;
 for(var i=0;i< $scope.propertyData.length;i++){
 
 $scope.propertyData[i]["riskTypeData"] = $scope.riskTypeData
 $scope.propertyData[i]["damageData"] = $scope.damageData
 $scope.propertyData[i]["injuryData"] = $scope.injuryData
 }
 console.log($scope.modelDamageType);
 
 $scope.riskTypeChange = function(data){
 $scope.b.modelDamageType.push($scope.damageData[0])
 }
 
});
</script>
</html>

This issue can be easily avoided by following the "best practice" of always have a '.' in your ng-models. — georgeawg, Jul 01 '17 at 18:10
@georgeawg can you please explain a bit, coz I am new to angularjs — , Jul 01 '17 at 18:11
Explain "didn't work well". Describe the problem behavior and the desired behavior. Also include the code for the `riskTypeChange` function. — georgeawg, Jul 01 '17 at 18:15
so when I wrote a ng-change event on Type of Riks_0 and tried to filter the value of Type of damage_0 all of the Type of damage dropdown got filtered. What I expect is if I select "Movable " for Type of Riks_0 Type of damage_0 dropdown should filter out "NA" but not all Type of damage dropdown..........I have already included change event code — , Jul 01 '17 at 18:25
@georgeawg added the change event code which i tried after your suggestion of using '.' in ng-model — , Jul 01 '17 at 18:39
Please read [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). — georgeawg, Jul 01 '17 at 18:48
You should handle select elements with ng-options & not with ng-repeat in options tag, then use id from those options object as value & name riskType,damage, injury . Then again if you're access to change the object values a little there's better way to solve your issue: https://plnkr.co/edit/Rq6dfNAaHH6IDs4M0bgq?p=preview — Shantanu, Jul 01 '17 at 22:01
@Shantanu thanks man, your plunker working, but still I am confused as to how I can filter damage_0 drop down so it no longer has "NA" option.Could you please help with that — , Jul 02 '17 at 06:04

score 0 · Answer 1 · answered Jul 02 '17 at 10:30

0

Each ng-repeat create a child scope. Therefore, you need to use $parent to ref upper scope. So, try $parent or even $parent.$parent

answered Jul 02 '17 at 10:30

Jack Luo

333
3
5

himanshu · Accepted Answer · 2017-07-04T11:43:25.263

ng-repeat creates a child scope. So here you can pass the model of inner ng-repeat with a change event and use it.

E.g. Let the controller as

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

    app.controller('MainCtrl', function($scope) {
     $scope.details = [
        {
            "Name": "John",
            "CountryId": "1"
        },
        {
            "Name": "Dave",
            "CountryId": "2"
        }];

    $scope.Countries = [
        {
            "Id": "1",
            "Country": "USA"
        },
        {
            "Id": "2",
            "Country": "England"
        }];

    $scope.Change=function(id){
      alert(id)
    } 
  });

The HTML can be like this for getting the model value of select inside ng-repeat

<body ng-app="plunker" ng-controller="MainCtrl">
  <div class="box" ng-repeat="item in details track by $index">
    <select ng-model="CountryModel" 
     ng-options="option.Country as option.Country for option in Countries"
     ng-change=Change(CountryModel)>
   </select>
</div>

Here is the demo plunker https://plnkr.co/edit/KbZ6fCbjHuFGlHugY8ff?p=preview

Thanks @himanshu you answer really saved my day. One more quick question, how can I set default value depending on conditions ? — , Jul 05 '17 at 07:57
I am glad !! it helped. So you want to set default value of drop down ? — himanshu, Jul 05 '17 at 08:02

Access ng-model of element which is inside parent ng-repeat

2 Answers2