訪問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-重複

回答

相關問題