Question

<div ng-app="myApp" ng-controller="myCtrl">
     <select ng-model="selectedName" ng-options="x for x in names" multiple>
     </select>
     <input value="{{selectedName[0]}}">
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

如您所见，当单击选项时，我有一个应该更新输入值的选择，它可以工作，但是当我从输入中删除一些文本并单击选项时，它将不再更新输入值

注意：当我在检查器中检查html时，值属性会更新，但不会在输入元素中直观显示

对此有任何解释或解决方案吗？

Answer 1

我建议不要在您的项目中使用$ scope对象，而只是为了快速解决您的问题。有很多方法可以实现它，例如可以使用ng-change指令。可以使用ng-model指令代替value属性。如我所见，select具有乘法属性，请在ng-change fn中使用join（）将数组更改为具有乘法值的字符串。

type MappedType = {
    key1: 'value1';
    key2: 'value1' | 'value2';
};

type InverseMappedType = Inverse<MappedType>;
// type InverseMappedType = {
//     value1: never;
//     value2: 'key2';
// }

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-change="update(selectedName)" ng-model="selectedName"
          ng-options="x for x in names" multiple>
  </select>
  <input ng-model="selected">
</div>

Answer 2

您可以在输入元素上使用相同的ng-model来维护select和input元素之间的双向通信。

但是，由于在multiple元素上使用了select指令，因此所选模型值将保存为数组，而在输入中手动输入的值将保存为字符串。

您可以通过在输入元素中添加指令以将模型值解析为数组来克服此问题，这是示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedName" ng-options="x for x in names" multiple></select>
   <input ng-model="selectedName" to-array>
</div>
<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

app.directive('toArray', function(){
  return{
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      function toArray(viewValue){       
        return viewValue && viewValue.split(',');
      }
      ctrl.$parsers.unshift(toArray);
    }
  };
});
</script>

Answer 3

可能您正在尝试从THE SAME值开始选择相同范围的项目。在您的示例中，您尝试仅显示第一个选定的项目。

更改：

<input value="{{selectedName[0]}}">

进入：

<input value="{{selectedName}}">

似乎工作正常。对于此示例，我建议使用：ui-select

删除文本时AngularJS输入值不会更新

3 个答案: