angularJsのdiv /ボタンの選択と選択解除方法を教えてください。

Question

listではなく、divにアイテムを作ろうとしています。アイテムがクリックされた場合、divは色が変わり、アイテムがカラムに追加されますが、アイテムを再びクリックするとアイテムは元の色と列の項目はなくなります。私はちょうど角をなしてそれをする方法を考えることができません。私は列に追加することができ、アイテムを削除する別のオプションに来た、削除ボタンがありますが、私はまだ選択と選択解除を行うことができます好奇心です。

この

は私が私のhtmlでのjs

//Controller for app features 
app.controller("FeaturesController", function(){ 
    this.apps = features; 
    this.listAppPrices = []; 

    // add name and price into the new array which is used to show in the table 
    this.addPrices = function(name, price){ 
     //Checks if the exact name, price property exists in the array and return boolean 
     var found = this.listAppPrices.some(function (e){ 
      console.log(e.name); 
      return ((e.name === name) && (e.price === price)) ; 
     }); 

     //If found not true then push the new values into the array 
     if(!found){ 
      this.listAppPrices.push({name: name, price: price}); 
     } 
    }; 

    // adds all the prices of the array which gives the total 
    this.totalAppPrice = function(){ 
    var total = 0; 
    for(var i = 0; i < this.listAppPrices.length; i++){ 
     total += this.listAppPrices[i].price; 
    } 
     return total; 
    }; 

    // remove the whole object in the array when remove is clicked 
    this.remove = function(index) { 
     this.listAppPrices.splice(index, 1); 
    }; 
}); 

Iで

<!--Select App Features--> 
<div class="panel-heading" ng-controller="FeaturesController as featuresCtrl"> 
    <h1 class="text-center">App Features</h1> 
    <div class="text-center"> 
     <div ng-repeat="app in featuresCtrl.apps" class="btn btn-primary platform-btn-style" ng-click="featuresCtrl.addPrices(app.name, app.price)">{{ app.name }}</div><br> 
    </div> 
    <div> 
     <table class="table table-striped table-hover"> 
      <thead> 
       <tr> 
        <th>Device Added</th> 
        <th>Device Price</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tr ng-repeat="appList in featuresCtrl.listAppPrices"> 
       <td>{{ appList.name }}</td> 
       <td>{{ appList.price }}</td> 
       <td><button class="btn btn-default" ng-click="featuresCtrl.remove($index)">Remove</button></td> 
      </tr> 
     </table> 
     <div>Total : {{ featuresCtrl.totalAppPrice() }}</div> 
    </div> 
</div><!-- end select app features/FeaturesController--> 

私のコントローラ（私はそれを最初に試みを与えるためにボタンを使用していた私のbtn btn-primaryクラスを無視する）持っているものですどのようにこれを行うことができるかというアイデアを持っているのですが、私はコードを書くことはできません。

P.S.コードは単純です、私はコードスクールでそれを学び、自分自身を教育するための楽しみのために何かを作りたがっていました。事前の人々

Answer 1

angular.module("stack", []) 
 
    .controller("FeaturesController", function($scope) { 
 
     // this.apps = features; 
 
     this.listAppPrices = []; 
 
     this.apps = [{ "name": "a1", "price": "12" }, { "name": "a2", "price": "13" }, { "name": "a3", "price": "14" }]; 
 

 

 
     $scope.dummyArray = []; 
 
     var f = 0, 
 
      x = 0, 
 
      rem = false; 
 
     this.setSelected = function(app, index) { 
 
      console.log("app ", app); 
 

 
      //remove an item 
 
      if (app.selected) { 
 
       console.log(" list ", $scope.dummyArray); 
 
       $scope.dummyArray.forEach(function(e, ind) { 
 
        if (e.name === app.name) { 
 
         console.log(ind, " e ", e); 
 
         rem = true; 
 
         $scope.dummyArray.splice(ind, 1); 
 
        } 
 
       }); 
 
       console.log("dumm ", $scope.dummyArray); 
 

 
       this.listAppPrices = $scope.dummyArray; 
 

 
      } else { 
 
       rem = false; 
 
      } 
 
      //used to select a div and change its colour 
 
      app.selected ? app.selected = false : app.selected = true; 
 

 
      //add an item 
 
      if (!rem) { 
 
       if ($scope.dummyArray.length) { 
 
        $scope.dummyArray.forEach(function(each) { 
 
         console.log("each "); 
 
         if (each.name !== app.name) { 
 
          console.log("inside if "); 
 
          f = 1; 
 
         } 
 
        }); 
 
       } else { 
 
        console.log("inside else "); 
 
        $scope.dummyArray.push(app); 
 

 
       } 
 
       if (f === 1) { 
 
        f = 0; 
 
        console.log("push"); 
 
        $scope.dummyArray.push(app); 
 
       } 
 
       console.log(" list--> ", $scope.dummyArray.length); 
 
       this.listAppPrices = $scope.dummyArray; 
 
      } 
 

 
     } 
 
    });

.selected { 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="stack"> 
 

 
<head> 
 
    <title>stack</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="panel-heading" ng-controller="FeaturesController as featuresCtrl"> 
 
     <h1 class="text-center x">App Features</h1> 
 
     <div class="text-center"> 
 
      <div ng-repeat="app in featuresCtrl.apps track by $index" class="btn btn-primary platform-btn-style" ng-click="featuresCtrl.setSelected(app,$index)" ng-class="{selected: app.selected}">{{ app.name }}</div> 
 
      <!-- <div ng-if="(c%2===0)" ng-repeat="app in featuresCtrl.apps" class="btn btn-primary platform-btn-style" ng-click="featuresCtrl.setSelected(app)">{{ app.name }}</div> --> 
 
      <br> 
 
     </div> 
 
     <div> 
 
      <table class="table table-striped table-hover"> 
 
       <thead> 
 
        <tr> 
 
         <th>Device Added</th> 
 
         <th>Device Price</th> 
 
         <th></th> 
 
        </tr> 
 
       </thead> 
 
       <tr ng-repeat="appList in featuresCtrl.listAppPrices"> 
 
        <td>{{ appList.name }}</td> 
 
        <td>{{ appList.price }}</td> 
 
        <td> 
 
         <button class="btn btn-default" ng-click="featuresCtrl.remove($index)">Remove</button> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div>Total : {{ featuresCtrl.totalAppPrice() }}</div> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 
    <script type="text/javascript" src="controller.js"></script> 
 
</body> 
 

 
</html>

のおかげで、私もtotalAppPriceをカウントしていないbutton.Iを削除する機能を追加していません。さもなければあなたの問題は解決されます:)。