Javascript Angular.js-为添加到待办事项列表的项目添加颜色/类别_Javascript_Html_Css_Angularjs

Javascript Angular.js-为添加到待办事项列表的项目添加颜色/类别

javascript html css angularjs

Javascript Angular.js-为添加到待办事项列表的项目添加颜色/类别,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我在向网站上的表单添加类时遇到问题。基本上，我要做的是创建一个事件列表，在其中输入事件名称，从四个选项中选择，将事件分类为1、2、3或4类。根据您选择的类别并单击“添加事件”，它应该将一个类添加到输入的文本中，并以列表格式将其发布到下面，并将该颜色添加到文本中。我不知道如何将类添加到添加到列表的内容中。我对angular很陌生，所以任何帮助都将不胜感激 var app = angular.module('eventApp', []); app.controller('todoCtrl', fu

我在向网站上的表单添加类时遇到问题。基本上，我要做的是创建一个事件列表，在其中输入事件名称，从四个选项中选择，将事件分类为1、2、3或4类。根据您选择的类别并单击“添加事件”，它应该将一个类添加到输入的文本中，并以列表格式将其发布到下面，并将该颜色添加到文本中。我不知道如何将类添加到添加到列表的内容中。我对angular很陌生，所以任何帮助都将不胜感激

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


事件名称：


活动类别：
1.
2.
3.
4.

还有我的css类div：

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


正文{padding:10px；}
.red{color:red；}
.blue{颜色：蓝色；}
.green{颜色：绿色；}
.yellow{颜色：黄色；}

谢谢你的帮助

我认为您希望创建如下内容

在对象中再添加一个名为todoClass的字段，并将其添加到数组中。在执行ng重复操作时，使用ng类将该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>

请注意，我在所有选项中添加了红色、蓝色、绿色和黄色作为值，而不是值1、2、3和4。这被添加到JSON对象中

你能用JSFIDLE或plnkr做一个演示吗？将其添加到帖子中

$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);
        });
    };