访问父 ng-repeat 内元素的 ng-model答案

【问题标题】：Access ng-model of element which is inside parent ng-repeat访问父 ng-repeat 内元素的 ng-model
【发布时间】：2017-12-05 10:39:45
【问题描述】：

对标题感到抱歉

那么，让我解释一下我的场景

首先有一个家长ng-repeat
在父 ng-repeat 内部我有 3 个选择选项，它们也由 ng-repeat 加载

我面临的问题是，我想访问每个选择选项的ng-model 并对更改执行特定操作。我尝试设置ng-model，但效果不佳

任何建议都非常感谢，真的花了很多时间在这上面

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

【问题讨论】：

这个问题可以通过遵循总是有一个“.”的“最佳实践”来轻松避免。在你的 ng 模型中。
@georgeawg 你能解释一下吗，因为我是 angularjs 新手
解释“效果不佳”。描述问题行为和期望的行为。还包括riskTypeChange 函数的代码。
因此，当我在 Type of Riks_0 上编写 ng-change 事件并尝试过滤 Type of Damage_0 的值时，所有 Type of Damage 下拉列表都被过滤了。我期望的是，如果我为 Riks_0 类型的损坏_0 下拉列表选择“可移动”，则应该过滤掉“NA”但不是所有的损坏类型下拉......我已经包含了更改事件代码跨度>
请包含无效的代码。

标签： javascript angularjs select angularjs-ng-repeat

【解决方案1】：

每个 ng-repeat 创建一个子作用域。因此，您需要使用 $parent 来引用上限范围。所以，试试 $parent 甚至 $parent.$parent

【讨论】：

【解决方案2】：

ng-repeat 创建一个子作用域。所以在这里你可以通过更改事件传递内部 ng-repeat 的模型并使用它。

例如让控制器作为

   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)
    } 
  });

在 ng-repeat 中获取 select 的模型值的 HTML 可以是这样的

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

这里是演示插件https://plnkr.co/edit/KbZ6fCbjHuFGlHugY8ff?p=preview

【讨论】：

谢谢@himanshu 你的回答真的救了我一天。另一个快速的问题，如何根据条件设置默认值？
我很高兴！！它有帮助。所以你想设置下拉的默认值？