javascript - 检索 Angular 火-6ren

javascript - 检索 Angular 火

转载作者：行者123 更新时间：2023-11-28 08:01:18

我是 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-style 背景颜色。

请问这不起作用吗？

if($scope.todos.item == 'pending'){
    $scope.color = "#FFD5FF";
}else if($scope.todos.item == 'completed'){
    $scope.color = "#E1FFE1";
}

最佳答案

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

关于javascript - 检索 Angular 火，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25347745/

文章推荐： javascript - 在fabric.js (Ubuntu) 中使用比例时文本扭曲

文章推荐： html - 如何仅使用 CSS 设置

首页

博学

6Ren·AI

商城

javascript - 检索 Angular 火