Question

嗨，我是棱角分明的新人，所以仍然在努力解决基本问题，这是我面临的一个问题。我有几个用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 = function（index）{ console.log（“你选择了选择”+索引）;

}

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>]

有人可以给我一些提示。提前谢谢！

Answer 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-model没有更新select中的选择更改

1 个答案: