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

Question

我有一个带有动态 id 输入的 html 模板。
此输入元素的值用于确定应将多少商品添加到我的购物车。我的问题是我无法弄清楚如何使用 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>