Question

我有一张表，该表列出了客户数据库中的各个字段。我想添加带有灰色标记的新列（表示没有问题），如果用户单击该标记，我希望该标记变成红色（表示存在问题）

我正在使用MVC，Angularjs和Font Awesome。

有人可以指出我的最佳方向吗？

using System;
using System.Data.Entity;
using System.Linq;
using System.Web.Mvc;
using Florence.Authentication;
using Florence.Data;
using Florence.Website.Models;
using Florence.Website.Models.Job;

namespace Florence.Website.Controllers
{
    /// <summary>
    
    /// </summary>
    public class JobController : Controller
    {
        /// <summary>
        ///     Search jobs
        /// </summary>
        /// <returns>Job list</returns>
        [AuthorizationFilter(PermissionList = "CanListJobs")]
        public ActionResult Index()
        {
            return View("~/views/job/index.cshtml");
        }

[AuthorizationFilter(PermissionList = "CanViewJobs", AllowLocalRequests = true)]
        public ActionResult PdfView(int id)
        {
            using (var context = new FlorenceContext())
            {
                var job = context.Jobs
                    .Include(c => c.Customer)
                    .Include(c => c.Customer.Address)
                    .First(c => c.Id == id);

                if (!HttpContext.Request.IsLocal && job.BelongsToCompanyId != DataBag.LoggedOnCompany.Id)
                {
                    return new HttpUnauthorizedResult();
                }

                return View("~/views/job/pdf/view.cshtml", job);
            }
        }

Answer 1

这取决于您的表结构，但是您需要在数组中为每一行创建一个新属性，或者创建一个与原始数组具有相同长度的新数组。然后只需添加一个新列并检测对该新属性/数组的任何更改。

这是一个简单的演示（单击文本 Icon 更改标志）：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.array = [
    {"ID":12345,"Details":"ABC"},
    {"ID":23456,"Details":"BCD"},
    {"ID":34567,"Details":"CDE"},
    {"ID":45678,"Details":"DEF"}
  ];

  // a new array of the same length (a `map` of it)
  $scope.flags = $scope.array.map(function(_){return false;});

  $scope.submit = function(){
    console.log($scope.flags); // (extra)
  }
});

table, th, td {
  border: 1px solid black;
}

.red {
  color: red;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="submit()">
      <table>

        <tr>
          <th ng-repeat="(key,value) in array[0]">
            {{key}}
          </th>
          <th>
            Flag
          </th>
        </tr>
        <tr ng-repeat="data in array">
          <td ng-repeat="(key,value) in data">
            {{value}}
          </td>
          <td>
            <span ng-click="flags[$index] = !flags[$index]">
            <i ng-class="{'red':flags[$index]}">Icon</i>
          </span>
          </td>
        </tr>

      </table>

      <!-- (extra) -->
      <button type="submit">Submit</button>
    </form>

  </div>
</body>

</html>

单击标记以突出显示问题

1 个答案: