Javascript Angularjs：选择更新ng模型时不更新

我创建了以下示例，以便您可以准确地看到发生了什么：

如果我使用ng选项，也会发生同样的情况。我有不同的理由这样做，但为了简化示例，我省略了这一部分

如您所见，默认情况下它有两个选项。我将在“选择”旁边显示ng模型的选定值，以便您可以看到它是什么。当您使用顶部部件添加第三个选项时，它会将该值设置为该新选项的值，如选择旁边显示的ng模型值所示，但选择本身不会更改以显示所选的正确值

下面是链接处的示例代码：

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>

添加类型

{{i.label}}-{i.value}
{{selectedDevice}}

这正是您不应该使用

ngRepeat

呈现选择选项的原因。您应该改用

ngOptions

：

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

添加类型
挑选
{{selectedDevice}}

问题在于，由于您没有使用

ng选项

，因此在设置新的

所选设备时，浏览器尚未完成渲染。如果设置为使用
ng选项
，则可以使用此解决方法。使用
$timeout
包装
$scope.selectedDevice=newElem.value
以确保它在浏览器使用
ng repeat
完成呈现更改后运行

我还添加了代码，以便在连续添加时增加下一个值，因为将其硬编码为“3”意味着即使添加了更多选项，第三个选项也会继续被选择


var testApp=angular.module（'testApp'，['ngRoute']）；
testApp.controller（'Ctrl'，函数（$scope，$timeout）{
$scope.newInput=''；
$scope.inputDevice=[{
值：“1”，
标签：“input1”
}, {
值：“2”，
标签：“input2”
}];
$scope.selectedDevice=''；
$scope.addType=函数（）{
var last=Number（$scope.inputDevice[$scope.inputDevice.length-1]。值）+1；
var newElem={
标签：$scope.newInput，
值：last.toString（）
};
$scope.inputDevice.push（newElem）；
$timeout（函数（）{
$scope.selectedDevice=newElem.value；
}, 0);
};
});




添加类型

{{i.label}}-{i.value}
{{selectedDevice}}
我遇到了类似的问题，原因是我的键是一个数字，但当试图设置另一个值时，我发送了一个字符串。这种情况下的解决方法是强制将模型值设置为与键相同的类型

例如：


当ng模型更新时，我遇到了同样的问题，即选择不更新。我从一个函数中检索ng模型的值，该函数基于一个键、值对从数组中提取对象

在执行此操作时，返回的对象具有hashkey属性
$$hashkey:“object:115”

问题发生在我使用angular.copy创建对象副本时，它剥离了这个“hashkey”属性，因此不会被选中

在我重新组织代码之后，为了在angular.copy之后获得ng模型值，问题得到了解决

ConstructorReviewers: function (oItem) {
      this.PERSON_ID = oItem.PERSON_ID;
      this.CHAIR_PERSON = oItem.CHAIR_PERSON;

      /* // Commented this part and added it to EditItem function      
      this.oDepartment = CommonFactory.FindItemInArray(vm.oCommittee.arrDepartments, 'NAME', this.DEPARTMENT, 'item');
      */    
      this.EditItem = function () {
           vm.EditItemOriginal = this;
           angular.copy(this, vm.EditItem); // After this update the ng-model into vm.EditItem.oTitle object
           vm.EditItem.oTitle = CommonFactory.FindItemInArray(vm.oCommittee.arrTitles, 'TITLE', vm.EditItem.TITLE, 'item');
           vm.Popup.ShowPopup(true, 'new_edit', Constants.Mentoring.Popup.Edit);
      }
}

我也有同样的问题。对我来说，解决这个问题的方法是将数字转换成字符串。例如：

$scope.selectedDevice = "" + newElem.value; 

很公平。我想我已经试过两种方法了，但显然不是。向上投票！我只是觉得如果我使用
ng选项，Jhorra不想使用
ng选项
，我会在上面得到一个空项。出于这个原因，我在某些情况下不使用ng OTPION。@BMS Empty item表示您没有正确设置ngModel，因此Angular不知道要选择什么选项。为了澄清这一点，要使第一项不为空，请在控制器中设置ng model变量的值，或者仅在设置后在dom上渲染ng，如果值是异步获得的。我使用
ng repeat
制定了一个解决方案，因为我想我误解了您想要使用它而不是
ng options
。至少您有了一种替代方法，并且理解了为什么原始代码不能按预期工作。
if (scope.keyType == 'number') {
    scope.model = parseInt(newVal, 10);
} else {
    scope.model = newVal;
} 

ConstructorReviewers: function (oItem) {
      this.PERSON_ID = oItem.PERSON_ID;
      this.CHAIR_PERSON = oItem.CHAIR_PERSON;

      /* // Commented this part and added it to EditItem function      
      this.oDepartment = CommonFactory.FindItemInArray(vm.oCommittee.arrDepartments, 'NAME', this.DEPARTMENT, 'item');
      */    
      this.EditItem = function () {
           vm.EditItemOriginal = this;
           angular.copy(this, vm.EditItem); // After this update the ng-model into vm.EditItem.oTitle object
           vm.EditItem.oTitle = CommonFactory.FindItemInArray(vm.oCommittee.arrTitles, 'TITLE', vm.EditItem.TITLE, 'item');
           vm.Popup.ShowPopup(true, 'new_edit', Constants.Mentoring.Popup.Edit);
      }
}

$scope.selectedDevice = "" + newElem.value;