我是Agngular Firebase的新手,我正在尝试编写一个ToDoList示例,任务将打开,并且根据它的“状态”,我想改变颜色。
controller.js
var myApp = angular.module('DemoApp', ['firebase']);
myApp.constant("FIREBASE_URL", "https://xxxxxxxx.firebaseio.com/todo/" )
function DemoCtrl($scope, $firebase, FIREBASE_URL) {
// Get Stored TODOs
var todosRef = new Firebase(FIREBASE_URL);
$scope.todos = $firebase(todosRef);
console.log($scope.todos);
if($scope.todos.item == 'pending'){
$scope.color = "#FFD5FF";
}else if($scope.todos.item == 'completed'){
$scope.color = "#E1FFE1";
}
}
这是我的html文件,我在
列出了任务<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"> </script>
<script src="controller.js"></script>
<body ng-controller="DemoCtrl" class="container" ng-app="DemoApp">
<h2>TASK LIST</h2>
<div ng-repeat="item in todos">
<div ng-style="{'width':'200px','padding':'20px','float':'left','border':'2px solid #FFF','background-color':color}">
<!--COMPLETED ICON-->
<span style="background:#FFD5FF;padding:10px" class="glyphicon glyphicon-thumbs- down" ng-if="item.estatus=='pending'" > </span>
<span style="background:#E1FFE1;padding:10px" class="glyphicon glyphicon-thumbs-up" ng-if="item.estatus=='completed'" > </span>
<small class="text-warning"> [ {{item.id}} ]</small>
<span>{{item.name}} </span><br>
<span>[ {{item.status}} ]</span>
</div>
</div>
所以我试图用{color}范围改变ng风格的背景色。
任何想法请不要这样做?
if($scope.todos.item == 'pending'){
$scope.color = "#FFD5FF";
}else if($scope.todos.item == 'completed'){
$scope.color = "#E1FFE1";
}
答案 0 :(得分:0)
上面的代码有几个问题,第一个问题是$scope.todos
数组,因此$scope.todos.item
的引用没有意义。至少,您需要索引数组以获取一个项目(例如$scope.todos[0].name
)。
接下来,状态测试使用了错误的属性。条件应该写成这样的东西:
item = $scope.todos[0];
if (item.status == 'pending') {
item.color = '#FFD5FF';
} else if (item.status == 'completed') {
item.color = '#E1FFE1';
}
下面是一个关于angularJS的简短但很好的教程的链接,其中第4章向您展示了如何使用Firebase: