Javascript 在一个选择框中选择一个选项将更新其余选项_Javascript_Angularjs

Javascript 在一个选择框中选择一个选项将更新其余选项

javascript angularjs

Javascript 在一个选择框中选择一个选项将更新其余选项,javascript,angularjs,Javascript,Angularjs,我刚刚开始用angular JS构建我的第一个应用程序，我遇到了一个障碍。我一直在尝试创建一个如下所示的页面：我动态创建如下html代码所示的控件： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Compar

我刚刚开始用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>

我很抱歉，因为我没有足够的声誉发布相同的图片，所以我无法发布这些图片

所以问题是，每当我尝试从第一个下拉列表中为缓存选择一个元素时，它也会填充第二个下拉列表。对于框的其他下拉列表也是如此。我没有正确使用ng模型

不知道发生了什么事。请帮忙！

谢谢大家!

您尝试过ng选项吗

<select ng-model="selectedBox" ng-options="boxObj.box for box in boxes">
</select>

主要问题是您在所有选择选项中共享ng模型的对象属性。相反，您需要为每个对象设置一个唯一的模型

将模型设置为

ng repeat

item

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

对象具有这两个属性/值，就不需要在控制器中为select设置默认选项，因为对象本身将提供自己的默认值

您可以通过JSFIDLE或plunkr进行共享吗？从第一眼看，问题似乎出现在代码ng model=“caches.cache”中，它应该类似于ng model=“caches.cache[0]”类似地，我可以在jsfiddle中轻松识别其他问题。该解决方案回答了OP问题的严格解释。所以，我投了赞成票。但这并没有触及他们所面临问题的根源。我的回答也试图涵盖这一点。完全同意，@MarcKline这不仅仅是ng-options。谢谢。那很有帮助，太好了！如果这是帮助您解决问题的原因，请单击复选标记接受它。

$scope.selectedBox = "defaultBox";

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