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

时间:2016-10-21 08:10:07

标签: javascript angularjs

我是Angular 1.5的新手。我想要一个数组,当它是空的时,我想禁用一个输入字段。当它不为空时,我想启用该字段。但它没有按预期工作。我整理了一个简单的jsfiddle

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,因此输入会在启用和禁用之间循环。但是不起作用,模板没有输出数据数组。

1 个答案:

答案 0 :(得分:2)

由于您使用的是控制器实例,因此需要使用其别名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

Fiddle