AngularJs'de bir div/düğme nasıl seçilir ve kaldırılır?

Question

list içinde değil, div ürününde ürün oluşturmaya çalışıyorum ve bir öğeye tıklandığında div farklı renklerde olacak ve öğe bir sütuna eklenecek, ancak öğe tekrar tıklandığında öğe değiştirilecek Orijinal renk ve sütunda öğe gitmiş olacak. Sadece açısal şekilde nasıl yapılacağını düşünemiyorum. Sütunu ekleyebilmek ve öğeyi kaldırabilmek için başka bir seçeneğe geldim, bir çıkarma düğmesi var ancak seçim ve seçimin nasıl yapılacağını merak ediyorum.

Bu

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

Benim denetleyicisi (ben o ilk etapta denemeye düğmesini kullanarak benim btn btn-primary sınıfları görmezden) ne var Bunun nasıl yapılabileceğine dair bir fikre sahip olmakla kalmayıp, onu yazacak kodları düşünemiyorum.

P.S. Kodlar basit, ben sadece kod okulda öğrendim ve kendimi eğitmek için eğlenceli bir şey yaratmak istedim. peşin insanlar

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>

teşekkürler ben de totalAppPrice saymak değil button.I kaldırmak işlevselliğini eklememiş. Aksi halde probleminiz çözüldü :).