Question

我是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";
}

Answer 1

上面的代码有几个问题，第一个问题是$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：

http://www.thinkster.io/angularjs/

检索角火

1 个答案: