访问NG-模型NG-重复

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

首先有一个父ng-repeat
里面父ng-repeat我有3选择选项，这也是加载由ng-repeat

问题我面临的是，我想访问01每个选择选项的，并对更改执行特定操作。我试着设置ng-model但din't真正行之有效

任何建议表示赞赏，真是花了很多时间在这

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

 
\t <div class="box" ng-repeat="item in propertyData track by $index"> 
 
\t <h2>{{item.propertyName}}</h2> 
 
\t <p> 
 
\t <label>Type of Riks {{$index}}</label> 
 
\t <select ng-model="a.modelRiskType" ng-change="riskTypeChange(riskType)"> 
 
\t <option ng-repeat="singleItem in item.riskTypeData">{{singleItem.riskType}}</option> 
 
\t </select> 
 
\t <label>Type of damage {{$index}}</label> 
 
\t <select ng-model="b.modelDamageType"> 
 
\t <option ng-repeat="singleItem in item.damageData">{{singleItem.damage}}</option> 
 
\t </select> 
 
\t <label>Type of Injury {{$index}}</label> 
 
\t <select ng-model="injury"> 
 
\t <option ng-repeat="singleItem in item.injuryData">{{singleItem.injury}}</option> 
 
\t </select> 
 
\t </p> 
 
\t </div> 
 
\t 
 
</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 = [ \t \t 
 
     {damage:'Own Damage',id:4}, 
 
     {damage:'Own Bodily Damage ',id:5}, 
 
     {damage:'Fire',id:6}, 
 
\t \t {damage:'NA',id:6}, 
 
]; 
 
    
 
$scope.injuryData = [ \t \t 
 
     {injury:'Medical Expenses',id:4}, 
 
     {injury:'Critical Illness',id:5}, 
 
     {injury:'Death',id:6}, 
 
\t \t {injury:'NA',id:6}, 
 
]; 
 
$scope.modelRiskType = $scope.riskTypeData; 
 
$scope.modelDamageType = $scope.damageData; 
 
for(var i=0;i< $scope.propertyData.length;i++){ 
 
    
 
\t $scope.propertyData[i]["riskTypeData"] = $scope.riskTypeData 
 
\t $scope.propertyData[i]["damageData"] = $scope.damageData 
 
\t $scope.propertyData[i]["injuryData"] = $scope.injuryData 
 
} 
 
console.log($scope.modelDamageType); 
 
    
 
$scope.riskTypeChange = function(data){ 
 
$scope.b.modelDamageType.push($scope.damageData[0]) 
 
} 
 
    
 
}); 
 
</script> 
 
</html>

来源

2017-07-01 Rohan Kawade

这个问题可以通过遵循“最佳实践”总是有一个'。'来轻松避免。在你的ng模型中。 – georgeawg

@georgeawg你可以请解释一下，因为我是新来的angularjs –

解释“工作不好”。描述问题行为和期望的行为。还包括'riskTypeChange'函数的代码。 – georgeawg

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

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

这里的模型值是演示plunker https://plnkr.co/edit/KbZ6fCbjHuFGlHugY8ff?p=preview

来源

2017-07-04 11:31:24 himanshu

谢谢@himanshu你的回答真的救了我的一天。还有一个简单的问题，我如何根据条件设置默认值？ –

我很高兴！它有帮助。所以你想设置下拉菜单的默认值？ – himanshu

每个NG-重复创建子范围。因此，您需要使用$ parent来引用较高范围。因此，请尝试$ parent或$ parent。$ parent

来源

2017-07-02 10:30:46

访问NG-模型NG-重复

回答

相关问题