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

【问题标题】：taking inputs for single controller from multiple input boxes in angular从角度的多个输入框中为单个控制器获取输入
【发布时间】：2017-10-13 03:17:11
【问题描述】：

两个输入框

我正在构建一个 Angular 应用程序。用户输入他想要创建的输入框的数量。因此，我根据用户输入安排了一个按钮和一个输入框以及类似的数字安排。

我以创建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，并且单个控制器切换我与之交互的任何输入框。

如何使用 Angular 实现这一点？

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

【问题讨论】：

使用 ngRepeat 创建 htm。 ng repeat 可以从您可以在控制器中创建的 json 数据驱动。这种方法的美妙之处在于，当 ng repeat 为每次迭代创建隔离范围时，您可以将 ngrepeat 对象传递给切换函数，在该对象上您将具有 isDisable 标志，您可以将其设置为 on 和 off

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

<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/

【讨论】：

【解决方案2】：

将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>

在控制器中：

<script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.ItemList =["Item A","Item B"];
                $scope.isDisabled=[];
                for(var i=0;i<$scope.ItemList.length;i++){
                   $scope.isDisabled.push(true);
                }
                $scope.toggledit = function(index){
                   $scope.isDisabled[index] = !$scope.isDisabled[index];
                };
            });

</script>

【讨论】：