时间戳

首页 > 解决方案 > 删除文本时AngularJS输入值不更新

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

问题描述

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

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

标签： javascriptangularjs

解决方案

我建议不要在您的项目中使用 $scope 对象，而只是为了快速解决您的问题。有很多方法可以实现它，例如您可以使用 ng-change 指令。使用 ng-model 指令代替 value 属性。如我所见， select 具有乘法属性，在 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();
    };
});

推荐阅读