angularjs ngModel未在选择输入中选择选项

发布时间：2020-12-17 07:08:58 所属栏目：安全来源：网络整理

导读：ngModel对输入类型文本的工作方式是否不同并选择？未选择选择控件以反映初始模型值. 当我更改select,input和currentUser.field的值也会改变,但如果我将输入文本的值更改为另一个键,则没有任何选择. {{currentUser.field}} // show correct field field key

ngModel对输入类型文本的工作方式是否不同并选择？
未选择选择控件以反映初始模型值.

当我更改select,input和currentUser.field的值也会改变,但如果我将输入文本的值更改为另一个键,则没有任何选择.

{{currentUser.field}} // show correct field field key (number) val

// ng-model works => show correct field key (number) val
<input ng-model="currentUser.field" type="text" /> 

// <option value="?" selected="selected" label=""></option> is selected
<select ng-model="currentUser.field" 
   ng-options='item.key as item.value for item in currentUser.collections.field '>
</select>

// only works with input text and {{currentUser.field}}
 <button ng-click='currentUser.field = 305'>select field (int)</button>
 <button ng-click='currentUser.field = "305"'>select field (string)</button>

解决方法

您的代码应该正常工作,除非您将值设置为不在您的选项中的currentUser.field：

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

app.controller('myController',function($scope) {
  $scope.currentUser = {
    collections: {
      field: [{
        key: '1',value: 'one'
      },{
        key: '2',value: 'two'
      },{
        key: '3',value: 'three'
      }]
    }
  };
  $scope.currentUser.field = "2";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <h3>expression</h3>
  {{currentUser.field}}
  
  <h3>input</h3>
  <input ng-model='currentUser.field' type='text'>
  
  <h3>select</h3>
  <select ng-model='currentUser.field' ng-options='item.key as item.value for item in currentUser.collections.field'></select>
  
  <h3>buttons</h3>
  <button ng-click='currentUser.field="305"'>305</button>
  <button ng-click='currentUser.field="1"'>1</button>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!