taking inputs for single controller from multiple input boxes in angular

Question

Two input boxes

I am building an angular app. A user inputs the number of input boxes he wants to create. Accordingly, I have an arrangement of a button and an input box with it and similar number arrangements as per the user input.

I take an example where 2 input boxes are created.

Now the functionality is - toggle enable/disable an input box when a button on the left of it is clicked.

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

I have created the following controller for the required functionality :

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

As clear from my code, a single controller is controlling both of my input boxes but since this is the case, clicking on 1st button enables/disables the input box for 2nd button also.

My code can have multiple input boxes and functionality for all of them is same so "I want a single controller to control all boxes" but I want a setup where clicking on a button enables/disables only the input box with it and not others.

One way is to pass distinct arguments with my toggledit() function on click of a particular button to identify which button is clicked, give separate distinct scope variable names to ng-disabled and give a separate piece of code for each input box. But having multiple input boxes like 30-40 is complicating this task.

Also having separate scope variable names for different input boxes in my code is not possible at the start as a number of input boxes is displayed according to what user inputs.They can only be dynamically assigned.

In all, since my input boxes are being created dynamically acc. to user input, I want some kind of setup where dynamically different scope variables are assigned to ng-disabled for different input boxes created and a single controller toggles whatever input box I interact with.

How can I achieve this with angular?

Note:- Above provided code is a demo and only a part of my actual code.I am new to the angular framework.

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