ng-model 没有在选择中的选择更改时更新答案

【问题标题】：ng-model is not getting updated on selection change in selectng-model 没有在选择中的选择更改时更新
【发布时间】：2014-07-17 23:58:21
【问题描述】：

您好，我是 Angular 新手，所以仍在为基本的事情苦苦挣扎，这是我面临的一个问题。我有一些用 ng-repeat 重复的 html 元素。其中的控件之一是下拉菜单。我已经附加了 ng-model 。但是在选择更改时，模型没有得到更新。不确定问题是什么。粘贴在代码下方。

HTML

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>Compare Tickers</h1>
    <hr/>
    <div ng-controller="MainCtrl">
<!--        <p>The ID is {{greeting.id}}</p>
        <p>The content is {{greeting.content}}</p>-->
            <ul>
                <li id="control{{$index}}" ng-repeat="oneTickerInfo in tickerInfo">
                    Ticker Info : <input type="text">
                    <select  ng-model="selectedCache" ng-options="cache for cache in caches" ng-change="handleCacheSelectionChange()"></select>
                    <select ng-click="handleHostSelectEvent()" ng-init="selectedBox = boxes[0]" ng-model="selectedBox"  ng-options="box.box for box in boxes"></select>
                    [<a href ng-click="tickerInfo.splice($index, 1)">X</a>]
                </li>
                <li>
                    [<a href ng-click="tickerInfo.push({})">add</a>]
                </li>
            </ul>
            <hr/>
    <div ui-view></div>
    </div>
</body>
</html>

JAVASCRIPT

 'use strict';

var app = angular.module('qaweb3App');

  app.controller('MainCtrl', function Hello($scope, $http) {


      $scope.tickerInfo = [
          {id:'1', cache:'adx',host:'tpa27'},
          {id:'1', cache:'asx',host:'tpa27'}
      ];

      $scope.caches = [];

      function process_response( data ) {
          var jsonArrayLen = data.length;
          for( var index=0; index < jsonArrayLen; index ++ ) {
              $scope.caches.push( data[index].cache.id);
          }
          /*$scope.selectedCache = $scope.caches[0];*/
          console.log( $scope.caches.toString() );
      }

      $http({method: 'JSONP', url: 'http://unixdeva10.factset.com:9643/jsonprouter?callback=JSON_CALLBACK&key=caches.json'}).
          success(function(data, status, headers, config) {
              process_response(data);
          }).
          error(function(data, status, headers, config) {
              alert("Failed");
          });

       $scope.getHosts = function() {
          console.log("You clicked box");
      };

      $scope.handleCacheSelectionChange=function() {
          console.log("Selection has changed");
          console.log( " You have chosen selection " + $scope.selectedCache );
      }

  });

尽管选择发生变化，选择始终保持第一个元素。

HTML 源代码

<select ng-model="selectedCache" ng-options="cache for cache in caches" ng-
change="handleCacheSelectionChange()" class="ng-valid ng-dirty">
<option value="0" selected="selected">adx</option>

在 handleCacheSelectionChange 函数内部，$scope.selectedCache 的值是未定义的。

编辑 1

根据您的建议，我尝试了以下方法：

Javascript：

$scope.tickerInfo = [ "selectedCache1", “selectedCache2” ];

$scope.handleCacheSelectionChange=函数（索引）{ console.log("你选择了选择" + index );

}

HTML

 <select  ng-model="$parent.tickerInfo[$index]" ng-options="cache.cacheName for cache in caches" ng-change="handleCacheSelectionChange($index)"></select>

到目前为止，一切正常。现在我有一个在 ng-repeat 之外的 href，因此要使用另一个条目动态更新tickerInfo，我们需要内部范围的最后一个索引。我无法将本地范围 $index 绑定到全局范围 $scope.currentIndex

[<a href ng-click="handleAddEvent($index)">add</a>]

谁能给我一些提示。提前致谢！

【问题讨论】：

您能创建一个小提琴/codepen 或其他东西吗？
我没有在您的标记中看到 ngApp。没有它你是如何让它工作的？
如果您在问题中仅包含高度相关的简短代码以及演示问题的演示，您一定会获得更快、质量更高的帮助。如果以下答案不能解决您的问题，请相应地更新您的问题。

标签： javascript html angularjs

【解决方案1】：

好的，这里的问题是你在表单中使用了 ng-repeat。

ng-repeat 创建一个new scope（归功于Zack Snow），这意味着您的视图代码正在编辑一个不同的$selectedCache。因此，您不会获得预期的双向数据绑定。

我认为来自 egghead.io 的 this short tutorial 会有所帮助。

如此有效，您的控制器代码正在与控制器 $scope 下的缓存对象进行交互。另一方面，视图中的缓存对象在重复的子范围内进行交互。

要解决此问题，请将selectedCache 对象附加到$scope 下的数据对象中，例如$scope.tickerInfo[$index].selectedCache。这样，ng-select 改变选中的缓存时，就改变了与控制器的一个绑定$scope

【讨论】：

ng-repeat 不会创建隔离范围，但会创建new scope。这意味着每个ng-model 都在写入不同的selectedCache。