如何从Angular中的ng repeat中获取输入值

How to get input value from ng-repeat in Angular

本文关键字：获取 输入 repeat ng Angular 中的      更新时间：2023-09-26

我正在尝试用angular做一个简单的购物车。基本上，我有一个项目列表，希望用户输入数量，然后得到数量大于0的项目列表。

如果数量大于0，那么我会将它们添加到阵列中，否则将其删除。

我一定是做错了什么，使我无法得到正确的数量。

它只在第一次工作，但第二次不更新。

我的控制器：

var extras1 = {Id:1,PackageName:"Balloons",Description:'Pack of 6',Cost:'$50.00',Qty:0}
var extras2 = {Id:2,PackageName:"Hot Chips",Description:'Fresh fried hot chips fully of yummy fat and cholesterol.',Cost:'$10.00',Qty:0}
var extras3 = {Id:3,PackageName:"Sausages",Description:'Hot sausages from premium offcuts',Cost:'$10.00',Qty:0}
$scope.extras =[extras1,extras2,extras3];
 $scope.extraSelected = function(){
    $scope.selectedExtra =[];
    angular.forEach($scope.extras, function(extra)
    {
       if(extra.Qty > 0 )
       {
           console.log('Extra added');
           $scope.selectedExtra.push(extra);
       }

    })
    console.log($scope.selectedExtra);
}

标记：

 <div  ng-repeat="extra in extras"   class="text-left">
    <div  class="row-centered">
        <div class="row form-group">
            <label class="col-md-1 col-sm-offset-1 step1-question" >{{$index + 1}}</label>
            <div class="col-md-8">
                <span class="h4 step1-answer"> {{ extra.PackageName}} </span>
                <br/>
                <span class="h5"> {{ extra.Description}} </span>
                <br/>
                <span class="h5"> {{ extra.Cost}} </span>
            </div>
            <div class="col-md-1">
            <input type='text' class="form-control step1-answer text-center "
                   ng-model="extra.Qty"
                   placeholder="0" style="background-color:#ffffff;padding: 5px;height: 45px;"
                   ng-change="extraSelected(extra)"
                />
            </div>
        </div>
        <hr/>
    </div>
</div>

也许是这样的？

<input type="number" ng-model="extra.Qty" ng-change="extraSelected()">
$scope.extraSelected = function () {
        $scope.selectedExtra = [];
        angular.forEach($scope.extras, function(extra) {
           if(extra.Qty > 0) {
               console.log('Extra added');
               $scope.selectedExtra.push(extra);
           }
        })
        console.log($scope.selectedExtra);
    }

 $scope.extraSelected = function(extra){
    $scope.selectedExtra =[];
    angular.forEach($scope.extras, function(extra)

您有额外的定义作为传入的参数，也作为forEach函数的参数-forEach在Qty为0的数组上循环，因此它将始终为零。

更改其中一个函数参数，使其不会影响另一个。

在这里学习函数范围。。。

相关文章：