Question

我在向我网站上的表单添加课程时遇到了问题。基本上我要做的就是创建一个事件列表，您可以在其中输入事件名称，从四个选项中选择，将事件分类为类别1,2,3或4.根据您选择的类别，单击＆＃34;添加事件＆＃34;，它应该为输入的文本添加一个类，并以列表格式将其发布到下面，并将该颜色添加到文本中。我无法弄清楚如何将类添加到列表中添加的内容。我对角度很新，所以任何帮助都会受到赞赏。

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

Answer 1

我认为你想创造如下。

Plnkr Demo

在对象中再添加一个名为 todoClass 的字段，并将其添加到数组中。当您执行 ng-repeat

时，使用ng-class将该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对象

Angular.js - 在添加到待办事项列表中的项目上添加颜色/类

1 个答案: