嗨，我是 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 = [ “选定的缓存1”， “选定的缓存2” ];
$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 绑定(bind)到全局范围 $scope.currentIndex
[<a href ng-click="handleAddEvent($index)">add</a>]
有人可以给我一些提示吗？提前致谢!
最佳答案
好吧，这里的问题是您在表单中使用了 ng-repeat。
ng-repeat 创建一个 new scope (归功于 Zack Snow )，这意味着您的 View 代码正在编辑不同的 $selectedCache。因此，您没有获得预期的双向数据绑定(bind)。
我认为this short tutorial来自 Egghead.io 会很有帮助。
如此有效地，您的 Controller 代码正在与 Controller $scope 下的缓存对象进行交互。另一方面， View 中的缓存对象在该重复的子范围内进行交互。
要解决此问题，请在 $scope 下的数据对象中附加 selectedCache 对象，例如 $scope.tickerInfo[$index].selectedCache.这样，当 ng-select 更改所选缓存时，它会更改与 Controller 的绑定(bind) $scope
关于javascript - ng-model 没有因 select 中的选择更改而更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23917077/