Question

有5个文本INPUT。需要检查这些5 INPUT中有多少完成，当你点击按钮创建的元素等于完成INPUT的数量。

如何在角度上做到这一点？

<div class="list">
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_second.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_third.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_fourth.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_fifth.text">
    </label>
</div>

Answer 1

假设您有一个带有 ng-click 指令的按钮给点击处理程序。

一种令人讨厌的方法是检查每个模型（.text）以确定哪个包含值。
重构代码，以便使用 ng-model 指令将每个输入绑定到单个模型（对象{}）。即。 model.input1，model.input2 ..等。需要一个循环来检查值。
我们还可以结合使用 ng-model 和 ng-change 来检测更改并使用指令保持对值的引用。请参阅tutorial

一个粗略的想法：

<强> HTML

.
<label class="item item-input">
  <span class="input-label">Input</span>
  <input type="text" ng-model="model.5">
</label>
.
<input type="button" value="Add" ng-click="add()"/>

<强>控制器

// 2. a single model, loop through properties.
function(){
  'use strict';

  var myApp = angular.module('myApp',[]);
  myApp.controller('Controller', ['$scope', function($scope) {
    $scope.model = {};

    $scope.add = function() {
      for (var property in $scope.model) {
        // do stuffs
      }
    };
  }]);

希望这有帮助。

Answer 2

如果输入编号为动态（ng-repeat），则可以将数组用于ng-model。（ng-model = examples [$ index]）。

在您的控制器中，您可以查看：

var count = 0;
for (var element in $scope.examples) {
    if (element.trim().length > 0) {
        count++;
    }
}

Answer 3

与@Shimrra的答案类似，我创建了一个可以满足您需求的Plunker：http://plnkr.co/edit/gJHjkJJNRGI9W1M0E1bN?p=preview

希望这适合你

HTML：

<body ng-controller='AppController as AppCtrl'>
<div class="list">
<label class="item item-input" ng-repeat="item in AppCtrl.items track by $index">
    <span class="input-label">Input</span>
    <input type="text" ng-model="item.text">
</label>
</div>
<a class="btn btn-default" ng-click="AppCtrl.AddItems()">Add</a>

控制器：

 angular.module('main.app', [])
  .controller('AppController',function(){
   var self = this;

   self.items = [{text:''},{text:''},{text:''},{text:''},{text:''}];

   self.AddItems = function(){
     var empty = 0;
     for(var i = 0; i < self.items.length; i++){
       if(self.items[i].text == ''){
         empty++;
     }
   }
   empty = 5-empty;

   for(var i = 0; i < empty; i++){
      self.items.push({text:''});
   }
 }

});

如何创建dom元素，具体取决于填充输入

3 个答案: