Angularjs：当NG-模型更新选择不更新 [英] Angularjs: select not updating when ng-model is updated

问题描述

我创建了下面的例子，所以你可以看到到底发生了什么： http://jsfiddle.net/8t2Ln/101/

如果我用NG选项同样的事情发生。我有做这种方式不同的原因，但对于例如简化留下的那部分。

正如你可以看到它在默认情况下两种选择。我是NG-模型的设定值显示旁边的选择，所以你可以看到它是什么。当您使用顶部件来添加它将该值设置为被显示的NG-模型值证明旁边选择新选项的值第三种选择，但选择本身不发生变化，以显示正确的值选中。

下面是在链路样品code：

  VAR testApp = angular.module（'testApp'，['ngRoute']）;testApp.controller（Ctrl键，功能（$范围）{    $ scope.newInput ='';
    $ scope.inputDevice = [
        {
            值：'1'，
            标签：'输入1'
        }，
        {
            值：'2'，
            标签：输入2
        }
    ];
    $ scope.selectedDevice ='';    $ scope.addType =功能（）{
        VAR newElem = {
            标签：$ scope.newInput，
            值：3
        };
        $ scope.inputDevice.push（newElem）;
        $ scope.selectedDevice = newElem.value;
    };
}）;
 

这里是HTML：

 ＆LT; D​​IV NG-应用=testApp＆GT;
    ＆LT; D​​IV NG控制器=CTRL＆GT;
        ＆所述p为H.;
            ＆LT;输入类型=文本NG模型=newInput/＆GT;
            ＆LT; BR /＆GT;
            ＆LT;按钮NG点击=将AddType（）＆gt;添加类型＆lt; /按钮＆GT;
        ＆所述; / P＆GT;
        ＆LT;选择NG模型=selectedDevice＆GT;
            ＆LT;选项＆GT;＆LT; /选项＆GT;
            ＆LT;选项NG重复=我的InputDeviceVALUE ={{i.value}}＆GT; {{i.label}}  -  {{i.value}}＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
        {{selectedDevice}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

这就是为什么你不应该使用 ngRepeat 与渲染选择选项。您应该使用 ngOptions 而不是：

 ＆LT;选择NG模型=selectedDeviceNG选项=i.value为（i.label +' - '+ i.value）对我的InputDevice＆GT ;
    ＆LT;选项＆GT;＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

下面是下面的演示。

\r

\r

angular.module（'示范'，[]）。控制器（'DemoController ，功能（$范围）{\r
\r
    $ scope.newInput ='';\r
    $ scope.inputDevice = [\r
    {值：1，标签：输入1}，\r
        {值：'2'，标签：'输入2'}\r
    ];\r
    \r
    $ scope.selectedDevice ='';\r
    $ scope.addType =功能（）{\r
        VAR newElem = {\r
            标签：$ scope.newInput，\r
            值：编号（$ scope.inputDevice [$ scope.inputDevice.length - 1]。价值）+ 1\r
        };\r
        $ scope.inputDevice.push（newElem）;\r
        $ scope.selectedDevice = newElem.value;\r
        $ scope.newInput ='';\r
    };\r
\r
}）;

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/angular.js/1.4.8/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=演示NG-控制器=DemoController＆GT;\r
    ＆LT;形式NG提交=将AddType（）＆GT;\r
        ＆LT;输入类型=文本NG模型=newInput/＆GT;\r
        ＆LT;按钮式=提交＆gt;添加类型＆lt; /按钮＆GT;\r
    ＆LT; /表及GT;\r
    ＆LT;选择NG模型=selectedDeviceNG选项=i.value为（i.label +' - '+ i.value）对我的InputDevice＆GT;\r
        ＆LT;选项＆GT;选择＆LT; /选项＆GT;\r
    ＆LT; /选择＆GT;\r
    {{selectedDevice}}\r
＆LT; / DIV＆GT;

\r

\r

\r

I've created the following example so you can see exactly what is happening: http://jsfiddle.net/8t2Ln/101/

The same thing happens if I use ng-options. I have a different reason for doing it this way, but for the simplification of the example left that part out.

As you can see it has by default two options. I'm displaying the selected value of the ng-model next to the select so you can see what it is. When you use the top piece to add a third option it sets the value to the value of that new option as is evidenced by the displayed ng-model value next to the select, but the select itself doesn't change to show the correct value selected.

Below is the sample code at the link:

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


});

And here is the 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>

解决方案

This is exactly why you should not use ngRepeat with to render select options. You should use ngOptions instead:

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

Here is a demo below.

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>

这篇关于Angularjs：当NG-模型更新选择不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！