如何通過數組中的每個值運行函數

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>