ng-model未在select中的選擇更改上更新

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（“您選擇了選擇” + 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>]

可以給我一些提示嗎？ 提前致謝！

Answer 1

好的，這里的問題是您正在使用ng-repeat表單。

ng-repeat創建一個新的作用域（歸功於Zack Snow ），這意味着您的視圖代碼正在編輯另一個$selectedCache 。 因此，您不會獲得預期的雙向數據綁定。

我認為egghead.io的這個簡短教程會有所幫助。

如此有效，您的控制器代碼正在與控制器$ scope下的緩存對象進行交互。 另一方面，視圖中的緩存對象正在該重復的子范圍內進行交互。

若要解決此問題，請將selectedCache對象附加到$scope下的數據對象中，例如$scope.tickerInfo[$index].selectedCache 。 這樣，當ng-select更改選定的緩存時，它將更改與控制器$scope的一個綁定

ng-model未在select中的選擇更改上更新

問題描述

1 個解決方案

解決方案1
1 已采納 2014-05-28 16:30:44

ng-model未在select中的選擇更改上更新

問題描述

1 個解決方案

解決方案1 1 已采納 2014-05-28 16:30:44

解決方案1
1 已采納 2014-05-28 16:30:44