在ng-repeat中使用ng-model時會有許多問,有的人碰到無法獲取綁定的數據內容,有的人遇到改動綁定的數據內容時所有迴圈生成的內容一起改變。上面的問題我在開發時也遇到過,但是解決後我卻怎麼也還原不了那種情況了,只能先簡單介紹一下無法獲取的情景該如何解決。例如:html: ...
在ng-repeat中使用ng-model時會有許多問,有的人碰到無法獲取綁定的數據內容,有的人遇到改動綁定的數據內容時所有迴圈生成的內容一起改變。上面的問題我在開發時也遇到過,但是解決後我卻怎麼也還原不了那種情況了,只能先簡單介紹一下無法獲取的情景該如何解決。
例如:
html:
<body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"> <select ng-model="p"> <option value="" style="display:none;">{{pop.pop}}</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> </select> <button ng-click="cs()">ceshi</button> </div> </div> </body>
js:
<script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"廣州"}]; $scope.cs=function(){ console.log($scope.p); } }) </script>
很簡單的功能,想要在點擊更改按鈕時獲取select當前選中的數據內容,但是你會發現這樣寫只能得到undefined,此時有的人會提出可以將p賦予成為一個對象,通過key:value的方式來保存每一次的選擇
$scope.p={};
這樣確實沒問題,但是會有一個新的問題那就是只要改動了一項,那麼所有的內容都會跟著一起改變,那麼有沒有更好的方法呢?
只要一個小小的改動
html:
<button ng-click="cs(p)">ceshi</button>
js:
$scope.cs=function(p){
console.log(p);
}
這隻是個簡單的例子,如大家在實際使用時發現有別的問題也可以在評論中留言。