如何从ng-repeat获取输入值的角度

我正在尝试在角度上做一个简单的购物车。基本上我有物品清单，并希望用户输入数量，然后获得数量大于0的物品清单。如何从ng-repeat获取输入值的角度

如果数量大于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>

来源

2016-09-27 snowflakes74

你能添加控制台日志吗？ –

非常奇怪的代码，特别是在调用slice时。如果你只想获得数组，其中Qty> 0，不需要删除项目（因为你正在执行'$ scope.selectedExtra = [];'） –

并且使用 –

也许这样吗？

<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); 
    }

来源

2016-09-27 11:18:30

谢谢..这正是我在你的评论后所做的，但它只是第一次显示数量。如果我第二次编辑数量，它不会更新数量。 – snowflakes74

我在[JSFiddle]（https://jsfiddle.net/biggieman/hpo6L692/1/）中试用它，它工作。 $ scope.selectedExtra和$ scope.extras需要数量 –

它只能工作1次，第二次如果qty更新为3，它将不会在控制台中显示Qty的更新值为3.控制台仍显示为数量1 – snowflakes74

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

你有额外的定义为被传递和参数也作为参数传递给ForEach功能 - forEach循环遍历Qty为0的数组，因此它将始终为零。

更改其中一个函数参数，使其不会打断另一个函数参数。

这里的功能范围的教训...

来源

2016-09-27 11:11:30

如何从ng-repeat获取输入值的角度

回答

相关问题