javascript - Angular.js - 在添加到待办事项列表的元素上添加颜色/类-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 17:33:02

我在向网站上的表单添加类时遇到问题。基本上我想做的是制作一个事件列表，在其中输入事件名称，从四个选项中进行选择，将事件分为类别 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">

和我在 CSS 中的类 div:

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

感谢帮助

JS Fiddle

最佳答案

我想你想像下面这样创建。

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>

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

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

关于javascript - Angular.js - 在添加到待办事项列表的元素上添加颜色/类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30182564/