Question

我正在尝试输入一些颜色名称，如果列表中没有颜色，则应将其添加到其中，并且li元素也应该获得该特定颜色。我不明白这是什么错误

  <!DOCTYPE html>
    <html>
        <head></head>
        <body ng-app="colors">
        <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"></input>
            {{ctrl.colordisp}}
        </div>
        <button type="button" ng-click="ctrl.checkColor()">submit</button>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
        angular.module("colors",[])
            .controller("mainCtrl",[function(){
            var self=this;
            self.colors=[
            {label:"red"},
            {label:"blue"},
            {label:"green"}
            ];
            self.colordisp="red";
            self.checkColor=function(){
            angular.forEach(self.colors,function(c){
                if(c.label!==self.colordisp){
                    self.colors.push("label:"+self.colordisp);
                }
            });
            };
            }]);
        </script>

        </body>
        </html>

Answer 1

您至少有3个问题。

问题＃1。将ngClick按钮放在控制器容器中，否则将无法检测到：

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

问题＃2。您需要将对象推送到数组中，而不是字符串：

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

问题＃3。检查数组中对象是否存在当前不正确。您最好使用Array.prototype.filter或Array.prototype.some方法：

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

最后，次要的：删除</input> - input元素没有结束标记（因为它们没有内容）。

演示： http://plnkr.co/edit/LBy5RCiXYApBEvuUoIdj?p=preview

Answer 2

您正在添加字符串，而不是对象。

更改您的

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

到

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

逻辑也是错误的，您应该检查颜色是否存在，如果不存在则添加，例如：

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

可以胜任。

无法使用角度中的forEach循环推送数组中的对象

2 个答案: