AngularJS：多個下拉列表

Question

我是AngularJS的新手。我正在編寫下拉菜單的代碼。每行都有相同的下拉列表。這是代碼

HTML：

<tr ng-repeat='item in items> 
    <td> 
     <span>{{item.profName}}</span> 
     <span ng-if="!item.editProf"> 
      <img src="images/img1.png" class="img"   
         ng-click="editProf({{item.pId}})"></img> 
     </span> 
     <div ng-if="item.editProf"> 
       <select ng-model="prof" class="form-control" name= "profName" 
         ng-options="prof.name as prof.value for prof in lookups.prof" 
        ng-Blur="updateProf([item.pId])"> 
       </select> 
     </div> 
    </td> 
</tr> 

腳本：

$scope.editProf = function(pId) 
    { 
     var profIndex = $scope.profIndexList[pId]; 
     var profObj = $scope.profList[profIndex]; 
     profObj.editProf = true; 
     $scope.prof = profObj.profName; 
    } 

當我在圖像上單擊它會去到編輯模式。當我選擇一個選項時，它將再次進入只讀模式。但是，當我打開兩個下拉菜單時，它會爲兩個下拉菜單顯示相同的選項（當我從第二個下拉菜單中選擇一個選項時，由於範圍相同，同一個選項會在第一個下拉菜單中更新）。如何解決這個問題？ 幫幫我。

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

 
myApp.controller('MyCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.cols = [{ 
 
     col_id: 'test1', 
 
     col_name: 'First' 
 
    }, { 
 
     col_id: 'test2', 
 
     col_name: 'Second' 
 
    }]; 
 

 
    $scope.col = "test1"; 
 
    
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select 
 
     ng-options="col.col_id as col.col_name for col in cols" 
 
     ng-model="col"> 
 
    </select> 
 
    <select 
 
     ng-options="col.col_id as col.col_name for col in cols" 
 
     ng-model="col"> 
 
    </select> 
 
    
 

 
    </div>

的jsfiddle：http://jsfiddle.net/x8rq2pda/23/

Answer 1

你應該總是remeber有一個點在你的ngModel屬性，否則你將永遠有這個問題（）。

您可以執行以下操作。

JSFiddle

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

 
myApp.controller('MyCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.cols = [{ 
 
     col_id: 'test1', 
 
     col_name: 'First' 
 
    }, { 
 
     col_id: 'test2', 
 
     col_name: 'Second' 
 
    }]; 
 

 
    $scope.col = { 
 
     dropdown1 : "test1", 
 
     dropdown2 : "test1" 
 
    }; 
 

 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select 
 
     ng-options="col.col_id as col.col_name for col in cols" 
 
     ng-model="col.dropdown1"> 
 
    </select> 
 
    <select 
 
     ng-options="col.col_id as col.col_name for col in cols" 
 
     ng-model="col.dropdown2"> 
 
    </select> 
 
    </div>

---- ----編輯

試試這個。在item.selected

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div ng-repeat="item in items"> 
     <p>{{item.profName}} 
     <select ng-options="profVals for profVals in item.profVals" ng-model="item.selected"></select> 
    </div> 
</div> 

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

myApp.controller('MyCtrl', ['$scope', 

function ($scope) { 
    $scope.items = [{ 
     profName: "ABC", 
     profEdit: true, 
     profVals: ["First", "Second", "Third"] 
    }, { 
     profName: "DEF", 
     profEdit: true, 
     profVals: ["First", "Second", "Third"] 
    }, { 
     profName: "XYZ", 
     profEdit: false, 
     profVals: ["First", "Second", "Third"] 
    }]; 
}]); 

選定的值將是可用的。 Updated fiddle