Question

如何让我的购买（i）功能与汽车中的每辆车一起运行＆＃34;在我的第一个段落标签中重复了吗？
如何让buy（）函数仅在单击一次时运行，这样如果点击两次，它不会再次从总数中减去汽车的价格，而是返回（或添加）金额扣除总额。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

为您的汽车设置一个属性，以确定它是否已经购买。

购买时我将属性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>

Answer 2

指令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>

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

2 个答案: