首頁 > web前端 > js教程 > angularjs在ng-repeat使用ng-model遇到的問題_AngularJS

angularjs在ng-repeat使用ng-model遇到的問題_AngularJS

WBOY
發布: 2016-05-16 15:19:05
原創
1249 人瀏覽過

在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);
    }
登入後複製

這只是個簡單的例子,如大家在實際使用時發現有別的問題也可以在評論中留言。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板