在ng-repeat中使用ng-model時會有許多問題，有的人碰到無法獲取綁定的數(shù)據(jù)內(nèi)容，有的人遇到改動綁定的數(shù)據(jù)內(nèi)容時所有循環(huán)生成的內(nèi)容一起改變。上面的問題我在開發(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>

很簡單的功能，想要在點(diǎn)擊更改按鈕時獲取select當(dāng)前選中的數(shù)據(jù)內(nèi)容，但是你會發(fā)現(xiàn)這樣寫只能得到undefined，此時有的人會提出可以將p賦予成為一個對象，通過key：value的方式來保存每一次的選擇

$scope.p={};

這樣確實沒問題，但是會有一個新的問題那就是只要改動了一項，那么所有的內(nèi)容都會跟著一起改變，那么有沒有更好的方法呢？

只要一個小小的改動

html：

<button ng-click="cs(p)">ceshi</button>

js:

 $scope.cs=function(p){
      console.log(p);
    }

這只是個簡單的例子，如大家在實際使用時發(fā)現(xiàn)有別的問題也可以在評論中留言。

您可能感興趣的文章:

相關(guān)文章

AngularJs 動態(tài)加載模塊和依賴
這篇文章主要介紹了AngularJs 動態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下
2016-09-09
AngularJS入門教程之Cookies讀寫操作示例
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實例形式分析了ngCookies模塊與get和put方法進(jìn)行cookie讀寫操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2016-11-11
Angular2中監(jiān)聽數(shù)據(jù)更新的方法
今天小編就為大家分享一篇Angular2中監(jiān)聽數(shù)據(jù)更新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能示例
這篇文章主要介紹了AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能,涉及AngularJS指令、事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2017-05-05
Angular.js初始化之ng-app的自動綁定與手動綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular.js初始化之ng-app的自動綁定與手動綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
AngularJS使用ng-Cloak阻止初始化閃爍問題的方法
這篇文章主要介紹了AngularJS使用ng-Cloak阻止初始化閃爍問題的方法,結(jié)合實例形式分析了AngularJS使用ng-Cloak來解決初始化時出現(xiàn)閃爍問題的相關(guān)技巧,需要的朋友可以參考下
2016-11-11
Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法實例分析
這篇文章主要介紹了Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法,結(jié)合實例形式詳細(xì)分析了Angular2管道與純管道相關(guān)概念、語法及使用技巧,需要的朋友可以參考下
2017-11-11
Angularjs上傳圖片實例詳解
上傳圖片需要引入插件ngFileUpload，使用bower安裝方法，下面通過本文給大家介紹Angularjs上傳圖片實例詳解，希望對大家有所幫助
2017-08-08
淺談Angular4中常用管道
本篇文章主要介紹了Angular4中常用管道，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
深入淺析AngularJS中的module(模塊)
我們所說的模塊，是你的AngularJS應(yīng)用程序的一個組成部分，它可以是一個Controller，也可以是一個Service服務(wù)，也可以是一個過濾器(Filter)，也可以是一個directive(指令)等等…都是屬于一個模塊,本文給大家介紹AngularJS中的module(模塊) ，感興趣的朋友一起學(xué)習(xí)吧
2016-01-01