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

Question

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>

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2021-01-13 22:29:38Z

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>

I am already getting the item.itemNo when I pass item into the addItem function. What I am trying to get is the value that would be in the input. For example, if the user wanted to add 5 items, they would put 5 into the input and click to add. Since I'm using ng-repeat, the id is necessary to know which input value should be taken, but I am not trying to pass item.itemNo.
@Chaospyke In that case you could get its value by using document.getElementById(input-${itemNo}). I've updated my answer.
This did work, but is there a way to get the input passed into the ng-click function as opposed to searching the document? This method doesn't seem like best practice for some reason.
The other way could be going through the nodes from the button to the input number field but that would be less performant.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related