Question

只是想尝试处理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 }
        }
  }]);

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

Answer 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-style，双向数据绑定会将每个玩家更新为所选颜色。如果不使用angular.copy，更改数据结构或执行其他操作来破坏双向数据绑定，就不可能让玩家拥有不同的颜色。

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

在ng-repeat中添加动态颜色

2 个答案: