Angular JS: How to get a dynamic input value into ngclick function

I have an html template with a input that has a dynamic id. The value from this input element is used to determine how much of an item should be added to my cart. My issue is that I cannot figure out how to access this input element using ngclick.

<div>
    <div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
        <div class="container-fluid h-100" >
            <div class="row h-100">
                <div class="col-sm-6 h-100 ">
                    <div class="row prodImage h-100"></div>
                </div>
                <div class="col-sm-6 h-100">
                    <div class="row h-100 ">
                        <div class="col-sm-12 prodDesc h-50 paddingZero">
                            <div class="titleDiv">{{item.itemName}}</div>
                            <div class="descDiv">{{item.itemDesc}}</div>
                        </div>
                        <div class="col-sm-12 addToCart h-50 paddingZero">
                            <div class="row h-100 marginAuto">
                                <div class="col-sm-6 h-100 paddingZero">
                                    <div class="addDiv">
                                        //This is the input that I need the value from.
                                        <input id="{{'input-'+item.itemNo}}" class="addAmount" type="number"/> 
                                    </div>
                                </div>
                                <div class="col-sm-6 h-100 paddingZero">
                                    <div class="row marginAuto h-100">
                                        <div class="col-sm-12"></div>
                                        <div class="col-sm-4"></div>
                                        <div class="col-sm-4">
                                            //this is where the ng-click function is
                                            <input class="addToCartButton btn btn-success" ng-click="addItem(item,{{item.itemNo}})" type="button"value="Add to Cart"/> 
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer

You’ll need to use the ngModel directive, like this:

<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />

The Add to Cart button must be calling to addItem function in this way:

<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />

See in this example:

(function() {

  var app = angular.module("app", []);
  app.controller("Controller", ["$scope", function($scope) {

    $scope.$ctrl = {
      items: [{
        itemType: "floor",
        itemName: "itemName 1",
        itemDesc: "itemDesc 1",
        itemNo: 1
      }, {
        itemType: "floor",
        itemName: "itemName 2",
        itemDesc: "itemDesc 2",
        itemNo: 2
      }]
    };

    $scope.addItem = function(item, itemNo) {
      console.log(item, itemNo);
    };
  }]);

}());
.item {
  border: #ccc solid 1px;
  border-radius: 5px 5px;
  height: 10em;
  margin: 0.5em;
  padding: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Controller">
    <div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
      <div class="container-fluid h-100">
        <div class="row h-100">
          <div class="col-sm-6 h-100 ">
            <div class="row prodImage h-100"></div>
          </div>
          <div class="col-sm-6 h-100">
            <div class="row h-100 ">
              <div class="col-sm-12 prodDesc h-50 paddingZero">
                <div class="titleDiv">{{item.itemName}}</div>
                <div class="descDiv">{{item.itemDesc}}</div>
              </div>
              <div class="col-sm-12 addToCart h-50 paddingZero">
                <div class="row h-100 marginAuto">
                  <div class="col-sm-6 h-100 paddingZero">
                    <div class="addDiv">
                      // This is the input that I need the value from.
                      <input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />
                    </div>
                  </div>
                  <div class="col-sm-6 h-100 paddingZero">
                    <div class="row marginAuto h-100">
                      <div class="col-sm-12"></div>
                      <div class="col-sm-4"></div>
                      <div class="col-sm-4">
                        // This is where the ng-click function is
                        <input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
                      </div>
                      <div class="col-sm-4"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Update: If you need to get the input number value you could use: document.getElementById(input-${itemNo}).

See in this example:

(function() {

  var app = angular.module("app", []);
  app.controller("Controller", ["$scope", function($scope) {

    $scope.$ctrl = {
      items: [{
        itemType: "floor",
        itemName: "itemName 1",
        itemDesc: "itemDesc 1",
        itemNo: 1
      }, {
        itemType: "floor",
        itemName: "itemName 2",
        itemDesc: "itemDesc 2",
        itemNo: 2
      }]
    };

    $scope.addItem = function(item, itemNo) {
      let input = document.getElementById(`input-${itemNo}`);
      if (input) {
        console.log(input.value);
      }
    };
  }]);

}());
.item {
  border: #ccc solid 1px;
  border-radius: 5px 5px;
  height: 10em;
  margin: 0.5em;
  padding: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Controller">
    <div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
      <div class="container-fluid h-100">
        <div class="row h-100">
          <div class="col-sm-6 h-100 ">
            <div class="row prodImage h-100"></div>
          </div>
          <div class="col-sm-6 h-100">
            <div class="row h-100 ">
              <div class="col-sm-12 prodDesc h-50 paddingZero">
                <div class="titleDiv">{{item.itemName}}</div>
                <div class="descDiv">{{item.itemDesc}}</div>
              </div>
              <div class="col-sm-12 addToCart h-50 paddingZero">
                <div class="row h-100 marginAuto">
                  <div class="col-sm-6 h-100 paddingZero">
                    <div class="addDiv">
                      // This is the input that I need the value from.
                      <input id="input-{{item.itemNo}}" class="addAmount" type="number" />
                    </div>
                  </div>
                  <div class="col-sm-6 h-100 paddingZero">
                    <div class="row marginAuto h-100">
                      <div class="col-sm-12"></div>
                      <div class="col-sm-4"></div>
                      <div class="col-sm-4">
                        // This is where the ng-click function is
                        <input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
                      </div>
                      <div class="col-sm-4"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *