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

來源:互聯網
上載者:User

在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);    }

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.