javascript - 如何在 angularJs 中选择和取消选择一个 div/button？

Question

我试图让元素不在 list 中，而是在 div 中，如果单击一个元素，div 将有不同的颜色并且该元素将被添加到一列中，但如果再次单击该元素，该元素将更改为原始颜色并且该元素将在该列中消失。我只是想不出如何以 Angular 方式做到这一点。我来到了另一个选项，可以在列中添加和删除元素，有一个删除按钮，但我仍然很好奇如何完成选择和取消选择。

这就是我的 html 中的内容(忽略我的 btn btn-primary 类，我首先使用按钮来尝试一下)

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

我在 js 中的 Controller

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

我有点知道如何做到这一点，但我就是想不出编写它的代码。

附言代码很简单，我只是在代码学校学习的，想创造一些有趣的东西来教育自己。在此先感谢人们

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。否则你的问题就解决了:)。