Angular.js：更新ng-model时选择不更新

Question

我创建了以下示例，以便您可以确切了解正在发生的事情：http :
//jsfiddle.net/8t2Ln/101/

如果我使用ng-options，也会发生同样的事情。我这样做有不同的原因，但由于简化了示例，所以省略了这一部分。

如您所见，默认情况下它具有两个选项。我将在选择旁边显示ng-
model的选择值，以便您可以看到它的含义。当您在顶部添加第三个选项时，它会将值设置为该新选项的值，这可以通过选择旁边显示的ng-
model值来证明，但是选择本身不会更改以显示正确的值已选择。

以下是链接中的示例代码：

var testApp = angular.module('testApp', ['ngRoute']);

testApp.controller('Ctrl', function ($scope) {

    $scope.newInput = '';
    $scope.inputDevice = [
        {
            value: '1',
            label: 'input1'
        },
        {
            value: '2',
            label: 'input2'
        }
    ];
    $scope.selectedDevice = '';

    $scope.addType = function () {
        var newElem = {
            label: $scope.newInput,
            value: '3'
        };
        $scope.inputDevice.push(newElem);
        $scope.selectedDevice = newElem.value;
    };


});

这是html：

<div ng-app="testApp">
    <div ng-controller="Ctrl">
        <p>
            <input type="text" ng-model="newInput" />
            <br />
            <button ng-click="addType()">Add Type</button>
        </p>
        <select ng-model="selectedDevice">
            <option></option>
            <option ng-repeat="i in inputDevice" value="{{ i.value }}">{{ i.label }} - {{ i.value }}</option>
        </select>
        {{ selectedDevice }}</div>
</div>

Answer 1

这就是为什么您不应该使用ngRepeat渲染选择选项的原因。您应该ngOptions改用：

<select ng-model="selectedDevice" 
        ng-options="i.value as (i.label + '-' + i.value) for i in inputDevice">
    <option></option>
</select>

通常，避免使用ngRepeat呈现选择选项。至少有两个很好的理由。ngRepeat每次html" target="_blank">迭代创建单独的子作用域，如果使用option标签，则不需要此作用域。另一个重要的警告是，ngRepeat您只能将select绑定到诸如字符串之类的基元，但是您将无法使用它将对象写入ngModel。

这是下面的演示。

angular.module('demo', []).controller('DemoController', function($scope) {



    $scope.newInput = '';

    $scope.inputDevice = [

        {value: '1', label: 'input1'},

        {value: '2', label: 'input2'}

    ];



    $scope.selectedDevice = '';

    $scope.addType = function() {

        var newElem = {

            label: $scope.newInput,

            value: Number($scope.inputDevice[$scope.inputDevice.length - 1].value) + 1

        };

        $scope.inputDevice.push(newElem);

        $scope.selectedDevice = newElem.value;

        $scope.newInput = '';

    };



});


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">

    <form ng-submit="addType()">

        <input type="text" ng-model="newInput" />

        <button type="submit">Add Type</button>

    </form>

    <select ng-model="selectedDevice" ng-options="i.value as (i.label + ' - ' + i.value) for i in inputDevice">

        <option>Select</option>

    </select>

    {{ selectedDevice }}

</div>