Question

为所有权而烦恼

所以，让我向你解释一下我的情景

首先有一个父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>

Answer 1

每个ng-repeat创建一个子范围。因此，您需要使用$ parent来反映上限范围。所以，试试$ parent或者甚至是$ parent。$ parent

Answer 2

ng-repeat创建子范围。所以在这里你可以通过改变事件传递内部ng-repeat的模型并使用它。

E.g。让控制器为

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

HTML可以像这样获取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>

这是demo plunker https://plnkr.co/edit/KbZ6fCbjHuFGlHugY8ff?p=preview

访问父ng-repeat内的元素的ng-模型

2 个答案: