angularjs在ng-repeat中使用ng-model遇到的問題
更新時間：2016年01月21日 10:50:08 投稿：hebedich
本文給大家分享了一個個人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題，并附上簡單的解決辦法，希望能對大家學習angular有所幫助
在ng-repeat中使用ng-model時會有許多問題，有的人碰到無法獲取綁定的數(shù)據(jù)內容，有的人遇到改動綁定的數(shù)據(jù)內容時所有循環(huán)生成的內容一起改變。上面的問題我在開發(fā)時也遇到過，但是解決后我卻怎么也還原不了那種情況了，只能先簡單介紹一下無法獲取的情景該如何解決。
例如：
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當前選中的數(shù)據(jù)內容，但是你會發(fā)現(xiàn)這樣寫只能得到undefined，此時有的人會提出可以將p賦予成為一個對象，通過key：value的方式來保存每一次的選擇
$scope.p={};
這樣確實沒問題，但是會有一個新的問題那就是只要改動了一項，那么所有的內容都會跟著一起改變，那么有沒有更好的方法呢？
只要一個小小的改動
html：
<button ng-click="cs(p)">ceshi</button>
js:
$scope.cs=function(p){
console.log(p);
}
這只是個簡單的例子，如大家在實際使用時發(fā)現(xiàn)有別的問題也可以在評論中留言。
相關文章
詳解angular2實現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實現(xiàn)ng2-router 路由和嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要給大家介紹了關于Angular8路由守衛(wèi)原理和使用方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angular8具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
AngularJS 通過新的屬性和表達式擴展了 HTML。本文主要給大家介紹Angularjs 滾動加載更多數(shù)據(jù)的相關知識，需要的朋友參考下吧2016-03-03
本篇文章主要介紹了AngularJS之頁面跳轉Route ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
解決angularjs中同步執(zhí)行http請求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了angular6開發(fā)steps步驟條組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
在html規(guī)范里面,它定義了非常多的標簽,在這些標簽里面,相同標簽之間的嵌套,不同標簽之間的嵌套,是十分常見,在Angular里面,我們可以通過自定義標簽的方式引用組件,這里的標簽能否像原生的html標簽一樣,來嵌入html標簽,或者嵌套其他組件標簽呢?本文將介紹投影的作用。2021-05-05
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
angularjs http與后臺交互的實現(xiàn)示例
這篇文章主要介紹了angularjs http與后臺交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細的資料及簡單示例代碼有興趣的小伙伴可以參考下2016-09-09