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

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

WBOY

發布： 2016-05-16 15:19:05

原創

1213 人瀏覽過

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

登入後複製

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

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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