在Angular 1.5中,根据数组长度启用/禁用输入字段

Enable/disable input field depending on array length in Angular 1.5

本文关键字:启用 字段 输入 数组 Angular      更新时间:2023-09-26

我是Angular 1.5的新手。我想要一个数组,当它为空时,我想要禁用输入字段。当它不是空的时候,我想启用这个字段。但它并没有像预期的那样工作。我做了一个简单的例子。

angular.module('demoApp', [])
    .controller('MainController', MainController);
function MainController() {
    var vm = this;
    this.data = ['a', 'b'];
    setInterval(function() {
        if (vm.data.length === 0) {
            vm.data = ['a', 'b'];
        } else {
            vm.data = [];
        }
        console.log('vm.data is now ', vm.data);
    }, 2000);
}

<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
  <input type="text" ng-disabled="!data" />
  <br />
  data is {{ data }}
</div>

我希望每次执行setInterval()方法时,HTML都会更新,因此输入将在启用和禁用之间循环。但是不工作,模板没有输出数据数组

因为你正在使用控制器实例,你需要使用它的别名mainCtrl,检查data是否为空或不检查它的length属性。

<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
  <input type="text" ng-disabled="mainCtrl.data.length ==  0" />
  <br />
  data is {{ mainCtrl.data }}
</div>

另外,你应该使用$interval而不是setInterval

小提琴