Question

JS：

angular
.module('app', [])

function MainCtrl() {
    var ctrl = this;

    ctrl.selectionList = [
        { id: 1, name: 'apple'},
        { id: 2, name: 'banana'},
        { id: 3, name: 'grapes'},
        { id: 4, name: 'carrot'}
    ];

    ctrl.selectedThing = ctrl.selectionList[0].name; 

}

angular
.module('app', [])
.controller('MainCtrl', MainCtrl);

HTML：

<div class="row">

    <div class="col-sm-3 col-xs-12 unit">
        <select 
        ng-model="ctrl.selectedThing"
        ng-options="selections.name as selections.name for selections in ctrl.selectionList">
        </select>
    </div>

</div><!--end of first row-->

因此，此代码创建了四种不同的选择。问题在于，当我选择一个选项时，让我们说例如＆＃34; apples＆＃34;在一个选择中，所有其他选择也成为苹果。有没有办法用ng-options解决这个问题，还是我应该用HTML编写select？

Answer 1

你肯定想要使用ng-options，因为这不是问题所在。您看到的问题很可能是因为所有选择元素上的ng模型都是相同的ctrl变量。因此，当您更新其中一个时，它会更改绑定到所有四个下拉列表的单个变量。您需要为所选项目设置一个数组，或者为所选变量设置四个不同的实例。

ctrl.selectedThings = [ctrl.selectedList[0].name, '', '', ''];

然后在你看来你可以这样做......

<select 
        ng-model="ctrl.selectedThings[rowIndex]"
        ng-options="selections.name as selections.name for selections in ctrl.selectionList">
        </select>

如果您要经过4个项目，那么这不是最强大的解决方案，但您应该能够将其调整为动态。

Answer 2

您的代码工作正常，您可以检查并确认吗？！

＆＃13;

(function ()
{
    var app = angular.module("app", []);

    function HomeController()
    {
        var vm = this;
        vm.selectionList = [
            { id: 1, name: 'apple'},
            { id: 2, name: 'banana'},
            { id: 3, name: 'grapes'},
            { id: 4, name: 'carrot'}
        ];

    }

    app.controller("HomeController", [HomeController]);

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>Angular JS App</title>        
    </head>
    <body>

        <div class="container" ng-controller="HomeController as homeCtrl">

            <div class="row">

                <div class="col-sm-3 col-xs-12 unit">
                    <select
                            ng-model="homeCtrl.selectedThing"
                            ng-options="selections.name as selections.name for selections in homeCtrl.selectionList">
                    </select>
                    <pre>{{homeCtrl.selectedThing}}</pre>
                </div>

            </div><!--end of first row-->
           
        </div>


    </body>
</html>

＆＃13;

Answer 3

如果您的所有ng-model="ctrl.selectedThing"代码都有<select>，则它们都会更改为相同的选择，因为它们使用相同的范围属性。可以想象它有4个变量引用相同的数据：如果你改变了一个，访问任何变量都会检索相同的结果。

您需要将所有选择绑定到范围上的其他属性，因此ctrl.selectedThing1,2,...n。这不是很可扩展，但这可以解决您的问题。

Angular：如何使用ng-options进行四次单独选择？

3 个答案: