javascript - Angular.js - adding colors/classes on items added to to-do list -
i'm having trouble adding class form have on site. i'm trying make event list, input event name, select 4 options categorize event categories 1, 2, 3 or 4. depending on category select , click "add event", should add class text inputted , post below in list format, color added text. cannot figure out how add class added list. i'm pretty new angular appreciated.
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); }); }; }); i have form here in 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 calendar"> and class divs in css:
<style> body {padding: 10px;} .red {color: red;} .blue {color: blue;} .green {color: green;} .yellow {color: yellow;} </style> thanks help
i think want create following.
add 1 more field called todoclass in object , add in array. add todoclass class using ng-class when ng-repeat
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 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> controller 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); }); }; note instead of values 1,2,3 , 4 added red, blue, green , yellow value in options. , added json object
Comments
Post a Comment