从 angular 中的多个输入框获取单个控制器的输入

Question

两个输入框

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

我以创建2个输入框为例

现在的功能是 - 在单击输入框左侧的按钮时切换 enable/disable 输入框。

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

从我的代码中可以清楚地看出，一个控制器控制着我的两个输入框，但由于是这种情况，所以单击第一个按钮 enables/disables 也会控制第二个按钮的输入框。

我的代码可以有多个输入框，所有输入框的功能都是相同的，所以“我想要一个控制器来控制所有框”，但我想要一个设置，点击按钮 enables/disables 只有输入用它而不是其他盒子。

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

一开始我的代码中的不同输入框也有单独的范围变量名称是不可能的，因为根据用户显示的输入框数量 inputs.They 只能动态分配。

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

如何使用 angular 实现此目的？

注意：- 以上提供的代码是一个演示，我实际 code.I 的一部分是 angular 框架的新手。

Answer 1

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

Answer 2

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

从 angular 中的多个输入框获取单个控制器的输入

taking inputs for single controller from multiple input boxes in angular

angularjs

angularjs-directive

angularjs-scope

两个输入框