nie można przesuwać obiektu w tablicy za pomocą pętli forEach pod kątem

Question

Próbuję wprowadzić nazwę koloru, a jeśli nie ma koloru na liście, powinien on zostać do niej dodany, a element li powinien również uzyskać ten konkretny kolor. Nie rozumiem, co jest nie tak z tym

Answer 1

Dodajesz ciąg, a nie obiekt.

Zmień swoją

self.colors.push("label:"+self.colordisp); 

do

self.colors.push({label: self.colordisp}); 

Logika jest też źle, należy sprawdzić, czy kolor jest obecny, a także dodać, jeśli tak nie jest, więc na przykład:

 self.checkColor=function(){ 
      var found = false; 
      angular.forEach(self.colors,function(c){ 
      if(c.label ===self.colordisp){ 
       found = true; 
      } 
      }); 
      if (!found) { 
      self.colors.push({label: self.colordisp}); 
      } 
     } 

wykona zadanie.

Answer 2

Masz co najmniej 3 problemy.

Problem # 1. Put ngClick przycisk wewnątrz pojemnika sterownika kliknij inaczej nie zostaną wykryte:

<div ng-controller="mainCtrl as ctrl"> 
    <ul ng-repeat="color in ctrl.colors"> 
     <li ng-bind="color.label" ng-style="{color: color.label}"> 
    </ul> 
    <input type="text" ng-model="ctrl.colordisp"> {{ctrl.colordisp}} 
    <button type="button" ng-click="ctrl.checkColor()">submit</button> 
</div> 

Issue # 2. Trzeba naciskać obiektu do tablicy, a nie ciąg:

self.colors.push({label: self.colordisp}); 

Issue # 3. Sprawdzanie istnienia obiektu w tablicy jest obecnie nieprawidłowe. Można by lepiej wykorzystać albo Array.prototype.filter lub Array.prototype.some metody:

self.checkColor = function() { 
    var inArray = self.colors.some(function(obj) { 
     return obj.label === self.colordisp; 
    }); 
    if (!inArray) { 
     self.colors.push({label: self.colordisp}); 
    } 
}; 

Wreszcie nieznaczna: usuwa </input> - input elementy nie mają zamykanie tagów (ponieważ nie mają one treść).

Demo:http://plnkr.co/edit/LBy5RCiXYApBEvuUoIdj?p=preview