Question

我刚刚开始在角度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>

这是控制器的代码

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

不知道最近发生了什么。请帮忙！谢谢！

Answer 1

你试过ng-options吗？

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

并在您的MainCtrl Hello（）函数中：

$scope.selectedBox = "defaultBox";

Answer 2

主要问题是您在所有选择选项中共享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对象具有两者的属性/值，就不需要在控制器中为select设置默认选项，因为对象本身将提供其自己的默认值。

Plunker demo

Angular docs on select (including ngOptions)

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

2 个答案: