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">

и мой класс дивы в 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 в классе с использованием нг-класса, когда вы делаете нг-повтор

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 - добавление цветов/классов по элементам, добавленным в список дел

ответ

Смежные вопросы