如何通过数组中的每个值运行函数

Question

1. 如何让我的buy（i）函数与我的第一段标记中重复出现的每个“汽车中的汽车”一起运行？

2. 如何让buy（）函数只在点击一次时运行，以便如果点击两次，它不会再从总数中减去汽车的价格，而是返回（或添加）金额扣除总额。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.total = 2000; 
 
    $scope.cars = [{ 
 
     model: "Ford Mustang", 
 
     color: "red", 
 
     price: 100 
 
    }, 
 
    { 
 
     model: "Fiat 500", 
 
     color: "white", 
 
     price: 199 
 
    }, 
 
    { 
 
     model: "Volvo XC90", 
 
     color: "black", 
 
     price: 190 
 
    } 
 
    ]; 
 

 
    $scope.buy = function(i) { 
 
    $scope.total -= $scope.cars[i].price; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <p ng-repeat="car in cars" ng-click="buy()">{{car.model}}</p> 
 
    <a href="#"> 
 
    <p ng-click="buy(0)">{{cars[0].model}}</p> 
 
    </a> 
 
    <p> Money Remaining: <br>{{total}}</p> 
 
</div>

Answer 1

该指令ng-repeat可以跟踪当前迭代槽$index，你可以使用里面的ng-click指令在所需的车索引通路。 请注意ng-click需要一个表达式，因此您不需要使用括号来评估$index。

只允许购买一种汽车，如果我理解正确，将要求您跟踪已经销售的产品。在$scope.history我们可以保留已经销售的索引集合。

我想你想是这样的：

<div ng-app="myApp" ng-controller="myCtrl"> 
    <p ng-repeat="car in cars"> 
    {{car.model}} 
    <br> 
    <a ng-href="#" ng-click="buy($index)">Buy</a> 
    </p> 
    <p> Money Remaining: <br>{{total}}</p> 
</div> 
<script> 
    var app = angular.module('myApp', []); 

    app.controller('myCtrl', function($scope) { 
    $scope.total = 2000; 
    //keep trak of what was bought already 
    $scope.history = []; 
    $scope.cars = [ 
     {model : "Ford Mustang", color : "red", price: 100}, 
     {model : "Fiat 500", color : "white", price: 199}, 
     {model : "Volvo XC90", color : "black", price: 190} 
    ]; 

    $scope.buy= function (i) { 
     var p; 
     //if bought, cancel it 
     if((p = $scope.history.indexOf(i)) !== -1){ 
     $scope.history.splice(p, 1); 
     $scope.total += $scope.cars[i].price ; 
     }else{ 
     //else add it to history 
     $scope.history.push(i); 
     $scope.total -= $scope.cars[i].price ; 
     } 
    } 
    }); 
</script> 

Answer 2

设置属性，以你的车知道它是否已被或不买。

购买时我将属性isBought设置为true。这也将隐藏购买按钮与ng-if

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.total = 2000; 
 
    $scope.cars = [{ 
 
     model: "Ford Mustang", 
 
     color: "red", 
 
     price: 100 
 
    }, 
 
    { 
 
     model: "Fiat 500", 
 
     color: "white", 
 
     price: 199 
 
    }, 
 
    { 
 
     model: "Volvo XC90", 
 
     color: "black", 
 
     price: 190 
 
    } 
 
    ]; 
 

 
    $scope.buy = function(car) { 
 
    car.isBought = true; 
 
    $scope.total -= car.price; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="car in cars"> 
 
    <p>{{car.color}} {{car.model}} - {{car.price}}$</p> 
 
    <button ng-if="!car.isBought" ng-click="buy(car)">Buy</button> 
 
    </div> 
 
    <i> Money Remaining: <b>{{total}}$</b></i> 
 
    <h5>Cars bought</h5> 
 
    <div ng-repeat="car in cars"> 
 
    <p ng-if="car.isBought">{{car.color}} {{car.model}} - {{car.price}}$</p> 
 
    </div> 
 
</div>