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

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 时，value 属性已更新但在输入元素中不可见

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

Answer 1

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

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

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