Angular JS：如何将动态输入值获取到 ngclick 函数中

Question

我有一个 html 模板，其输入具有动态 ID。此输入元素的值用于确定应将多少商品添加到我的购物车。我的问题是我不知道如何使用 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 1

您需要使用 ngModel 指令，如下所示：

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

添加到购物车 按钮必须以这种方式调用 addItem 函数：

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

见本例：

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

更新： 如果您需要获取输入的数值，您可以使用：document.getElementById(input-${itemNo}).

见本例：

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

Angular JS：如何将动态输入值获取到 ngclick 函数中

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

javascript

angularjs