以角度为单位从多个输入框中获取单个控制器的输入

时间:2017-10-13 03:17:11

标签: angularjs angularjs-directive angularjs-scope

两个输入框

Two input boxes

我正在构建一个角度应用程序。用户输入他想要创建的输入框的数量。因此,我根据用户输入安排了一个按钮和一个带有它的输入框和类似的数字排列。

我举了一个例子,其中创建了2个输入框。

现在功能是 - 当点击左侧的按钮时,切换启用/禁用输入框。

<div ng-app="myApp" ng-init="isDisabled=true" ng-controller="myCtrl">

<button ng-click="toggledit()">Item A</button>
<input type="text" ng-disabled="isDisabled">

<button ng-click="toggledit()">Item B</button>
<input type="text" ng-disabled="isDisabled">

</div>

我为所需的功能创建了以下控制器:

<script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){

                $scope.toggledit = function(){
                   $scope.isDisabled = !$scope.isDisabled;

                };
            });

</script>

从我的代码中可以清楚地看到,一个控制器正在控制我的两个输入框,但由于是这种情况,点击第一个按钮也会启用/禁用第二个按钮的输入框。

我的代码可以有多个输入框和功能,所有这些都是相同的,所以“我想要一个控制器来控制所有的盒子”,但我想要一个设置点击一个按钮启用/禁用它的输入框和不是其他人。

一种方法是在点击特定按钮时使用toggledit()函数传递不同的参数,以识别单击哪个按钮,为ng-disabled提供单独的不同范围变量名称,并为每个输入框分别提供一段代码。但是拥有30-40这样的多个输入框会使这项任务变得复杂。

在我的代码中也不能为我的代码中的不同输入框设置单独的范围变量名称,因为根据用户输入显示了多个输入框。它们只能动态分配。

总之,因为我的输入框是动态创建的。对于用户输入,我想要某种设置,其中动态地将不同的范围变量分配给ng-disabled用于创建的不同输入框,并且单个控制器切换我与之交互的输入框。

我怎样才能用角度来实现这个目标?

注意: - 上面提供的代码是一个演示,只是我实际代码的一部分。我是角度框架的新手。

2 个答案:

答案 0 :(得分:0)

{ low:-1547376220, high: -1, unsigned: false } 更改为数组并在调用isDisabled时将数组索引作为参数发送,以便仅禁用该特定按钮

toggledit()

在控制器中:

<div ng-app="myApp" ng-controller="myCtrl">
   <div ng-repeat="item in ItemList track by $index">
      <button ng-click="toggledit($index)">{{item}}</button>
      <input type="text" ng-disabled="isDisabled[$index]">
   </div>
</div>

答案 1 :(得分:0)

<script>
    var app = angular.module("myShoppingList", []); 
    app.controller("myCtrl", function($scope) {
        $scope.items = [];
        $scope.update = function () {
            $scope.items.length = 0;
            $scope.items.length = $scope.boxes;
        }
    });
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <h1>
        Enter no of boxes: <input type="number" ng-model="boxes" ng-
        change="update()">
    </h1>
    <ul>
        <li ng-repeat="x in items track by $index">
          <button type="button" ng-click="$index=!$index">
              Item`enter code here`
          </button>
          <input type="text" ng-disabled="$index">
        </li>
    </ul>
</div>

This might be what you are looking for. Check out the fiddle. https://jsfiddle.net/papish/zrfLfbeq/