ng-repeat_AngularJS で ng-model を使用するときに angularjs で発生する問題-jsチュートリアル-php.cn

ng-repeat_AngularJS で ng-model を使用するときに angularjs で発生する問題

WBOY

リリース： 2016-05-16 15:19:05

オリジナル

1209 人が閲覧しました

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の現在選択されているデータ内容を取得したいという非常に単純な関数ですが、このように書くと未定義しか取得できないことがわかります。 Key:value メソッドを使用して各選択を保存し、p をオブジェクトに割り当てることができることを提案します

$scope.p={};

ログイン後にコピー

これは確かに問題ありませんが、新たな問題が発生します。つまり、1 つの項目を変更すると、すべての内容が一緒に変更されてしまうということです。もっと良い方法はあるでしょうか?

ちょっとした変化

html:

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

ログイン後にコピー

js:

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

ログイン後にコピー

これは単なる例です。実際の使用中に他の問題が見つかった場合は、コメントにメッセージを残してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

ng-repeat_AngularJS で ng-model を使用するときに angularjs で発生する問題