Angular.js - 爲添加到待辦事項列表的項目添加顏色/類

我無法向我的網站上添加的表單添加到表單中。基本上我想要做的是製作事件列表，在其中輸入事件名稱，從四個選項中進行選擇，將事件分類爲1,2,3或4類。根據您選擇的類別並單擊「添加事件「，它應該爲輸入的文本添加一個類，並以列表的形式將其下載，並將該顏色添加到文本中。我無法弄清楚如何添加一個類添加到列表中。我很新的角度，所以任何幫助，將不勝感激。Angular.js - 爲添加到待辦事項列表的項目添加顏色/類

var app = angular.module('eventApp', []); 
app.controller('todoCtrl', function($scope) { 
$scope.todoList = [{todoText:'Football Game', done:false}]; 

$scope.todoAdd = function() { 
    $scope.todoList.push({todoText:$scope.todoInput, done:false}); 
    $scope.todoInput = ""; 
}; 

$scope.remove = function() { 
    var oldList = $scope.todoList; 
    $scope.todoList = []; 
    angular.forEach(oldList, function(x) { 
     if (!x.done) $scope.todoList.push(x); 
    }); 
}; 
});

我在這裏有一個形式，我的html：

<form ng-submit="todoAdd()"> 
Event Name: <input type="text" ng-model="todoInput"><br><br> 
Event Category: <select class="category" name="eventtype"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 

</select><br><br> 
<input type="submit" value="Add to Calendar">

和我班的div在CSS：

<style> 
body {padding: 10px;} 
.red {color: red;} 
.blue {color: blue;} 
.green {color: green;} 
.yellow {color: yellow;} 
</style>

感謝您的幫助

JS Fiddle

來源

2015-05-12 MonstermanMFR

可以在jsfiddle或plnkr中進行演示嗎？ –

新增至帖子 – MonstermanMFR

我想你想創建像下面這樣。

Plnkr Demo

添加一個多個場中的對象稱爲todoClass以及陣列中添加它。添加一個todoClass作爲類使用納克級，當你做NG重複

HTML

<body ng-controller="MainCtrl"> 


    <form ng-submit="todoAdd()"> 
    Event Name: <input type="text" ng-model="event.todoInput"><br><br> 
    Event Category: <select class="category" name="todoClass" ng-model="event.todoClass" ng-init="event.todoClass='red'"> 
     <option value="red">1</option> 
     <option value="blue">2</option> 
     <option value="green">3</option> 
     <option value="yellow">4</option> 

    </select><br><br> 
    <input type="submit" value="Add to Calendar"> 
</form> 
    <hr> 
    <h4>TODO</h4> 
    <ul> 
     <li ng-repeat="todo in todoList" > 
     <input type="checkbox" ng-model="todo.done" /> 
     <span ng-class="todo.todoClass" ng-bind="todo.todoText"></span> 

     </li> 

    </ul> 
    <button ng-click="removeTodo()">Remove Selected</button> 

    </body>

控制器JS

$scope.event={}; 

    $scope.todoList = [{todoText:'Football Game', done:false, todoClass:'red'}]; 

    $scope.todoAdd = function() { 
    $scope.todoList.push({todoText:$scope.event.todoInput, done:false,todoClass:$scope.event.todoClass}); 
    $scope.event.todoInput = ""; 
    $scope.event.todoClass="red"; 
    }; 

    $scope.removeTodo = function() { 
     var oldList = $scope.todoList; 
     $scope.todoList = []; 
     angular.forEach(oldList, function(x) { 
      if (!x.done) $scope.todoList.push(x); 
     }); 
    };

注意，而不是值1， 2,3和4我在所有選項中添加了紅色，藍色，綠色和黃色值。並添加到JSON對象

來源

2015-05-12 06:23:51

太好了，謝謝！像魅力一樣工作！ – MonstermanMFR

Angular.js - 爲添加到待辦事項列表的項目添加顏色/類

回答

相關問題