我刚刚开始用 Angular JS 构建我的第一个应用程序，但遇到了障碍。我一直在尝试创建一个如下所示的页面:
我动态创建了下面 html 代码中所示的控件:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Compare Tickers</h1>
<hr/>
<div ng-controller="MainCtrl">
<ul>
<li id="control{{$index}}" ng-repeat="oneTickerInfo in tickerInfo">
Ticker Info : <input ng-model="oneTickerInfo.ticker">
<select id="selector{{$index}}" ng-model="caches.cache">
<option id="options{{$index}}" ng-repeat="cacheName in caches">{{cacheName.cache}}</option>
</select>
<select ng-model="boxes.box">
<option ng-repeat="boxName in boxes">{{boxName.box}}</option>
</select>
[<a href ng-click="colors.splice($index, 1)">X</a>]
</li>
<li>
[<a href ng-click="colors.push({})">add</a>]
</li>
</ul>
<hr/>
<div ui-view></div>
</div>
</body>
</html>
这是 Controller 的代码
'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 = [
{cache:'adx'},
{cache: 'taiwan'}
]
$scope.boxes = [
{box:'tpa27'},
{box:'tpb27'}
]
});
很抱歉，我无法发布这些图像，因为我没有足够的声誉来发布相同的图像。
所以问题是，每当我尝试从第一个下拉列表中选择一个元素进行缓存时，它也会填充第二个下拉列表。另一个盒子下拉列表的情况也是如此。我是否没有正确使用 ng-model？
不知道发生了什么。请帮忙! 谢谢!
最佳答案
主要问题是您在所有选择的选项中共享 ng-model 的对象属性。相反，您需要为每个设置一个唯一的模型。
将模型设置为 ng-repeat 项 oneTickerInfo 中每个单独项的属性。您还应该使用 ng-options 来填充选择选项。
<select ng-model="oneTickerInfo.cache"
ng-options="cache.cache as cache.cache for cache in caches"></select>
<select ng-model="oneTickerInfo.host"
ng-options="box.box as box.box for box in boxes"></select>
只要您的 tickerInfo 对象具有两者的属性/值，就不需要在选择的 Controller 中设置默认选项，因为对象本身将提供自己的默认值。
关于javascript - 在一个选择框中选择一个选项会更新其余选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23635199/