在 ng-repeat 中添加动态颜色答案

【问题标题】：Adding dynamic colors in ng-repeat在 ng-repeat 中添加动态颜色
【发布时间】：2014-05-07 23:46:41
【问题描述】：

只是试图掌握 angularJS，就像构建一个简单的小应用程序一样，您可以在其中制作人员列表，并且在列表中他们的名字是彩色的。颜色由选择下拉框选择。

问题在于我尝试将新颜色添加到遇到问题的样式中的任何方式。此时名称已正确添加到列表中，但它们没有正确着色，并且出现以下错误：

    Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{color:].
    http://errors.angularjs.org/1.2.16/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bcolor%3A&p4=%7Bcolor%3A
        at http://localhost:8000/app/bower_components/angular/angular.js:78:12
        at Parser.throwError (http://localhost:8000/app/bower_components/angular/angular.js:10266:11)
        at Parser.primary (http://localhost:8000/app/bower_components/angular/angular.js:10239:14)
        at Parser.unary (http://localhost:8000/app/bower_components/angular/angular.js:10492:19)
        at Parser.multiplicative (http://localhost:8000/app/bower_components/angular/angular.js:10475:21)
        at Parser.additive (http://localhost:8000/app/bower_components/angular/angular.js:10466:21)
        at Parser.relational (http://localhost:8000/app/bower_components/angular/angular.js:10457:21)
        at Parser.equality (http://localhost:8000/app/bower_components/angular/angular.js:10448:21)
        at Parser.logicalAND (http://localhost:8000/app/bower_components/angular/angular.js:10439:21)
        at Parser.logicalOR (http://localhost:8000/app/bower_components/angular/angular.js:10427:21) <li ng-repeat="player in players" ng-style="{color:" "stylecolor(player)"}="" class="ng-scope ng-binding">

我认为这意味着 player.color 将返回 null？如果有一种方法可以在没有函数调用的情况下做到这一点，那我只是在尝试模拟这个解决方案： dynamically adding directives in ng-repeat

这是我的html：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scratch Snake</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js">  </script>

<!-- Bootstrap files -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>


</head>
<body ng-controller = "PlayerAdditionCtrl">
<ul class="list-group">Players:
<li ng-repeat="player in players" ng-style =  {color: "styleColor(player)"} > {{player.name}} </li>
</ul>

<div id="playerEntry"> 
        <p> 
    <label for="playername">Name: </label><input id="playername" class="form-control" type="text" name="playername" ng-model="playername"> 
            <select id="playerColor" ng-model="playercolor"> 
              <option value="#f00">Red</option> 
              <option value="#00f">Blue</option> 
              <option value="#0f0">Green</option> 
              <option value="#ff0">Yellow</option> 
            </select> 
        </p> 
        <button type="button" class = "btn btn-primary" id="addPlayerBtn" ng-click="addPlayer()">Add Player</button> 
        <button type="button" class = "btn btn-success" id="doneBtn" onclick="moveToGame();">All Done!</button> 

        <button type="button" class = "btn btn-info" id="defaultsBtn" onclick="loadDefaults();">Load Defaults</button> 
        <br>  
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

还有我的控制器：

'use strict';

/* Controllers */

angular.module('myApp.controllers', [])
  .controller('PlayerAdditionCtrl', ['$scope', function($scope) {
        $scope.players = [];

        //add a player
        $scope.addPlayer = function()
        {
            $scope.players.push(
                {
                    name: $scope.playername, 
                    color: $scope.playercolor
                });
        }

        $scope.styleColor = function (player)
        {
            return { color: player.color }
        }
  }]);

【问题讨论】：

标签： angularjs

【解决方案1】：

删除

$scope.styleColor() 在你的控制器中

改变

<li ng-repeat="player in players" ng-style =  {color: "styleColor(player)"} > {{player.name}} </li>

到

<li ng-repeat="player in players" ng-style="{color: player.color}" > {{player.name}} </li>

【讨论】：

【解决方案2】：

改变

<li ng-repeat="player in players" ng-style =  {color: "styleColor(player)"} > {{player.name}} </li>

到

<li ng-repeat="player in players" style="color: {{player.color}};"> {{player.name}} </li>

如果您坚持使用 ng 样式，双向数据绑定会将每个玩家更新为所选颜色。如果不使用 angular.copy、更改数据结构或做其他事情来打破双向数据绑定，就不可能让玩家有不同的颜色。

这是一个有效的 Plunker 示例：http://plnkr.co/edit/wEpKzN?p=preview

【讨论】：