只是想尝试处理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 }
}
}]);
答案 0 :(得分:3)
除去
控制器中的 $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>
答案 1 :(得分:1)
更改
<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