Нажмите на флаг, чтобы выделить проблему - PullRequest
Новая
       12

Нажмите на флаг, чтобы выделить проблему

0 голосов
/ 19 ноября 2018

У меня есть таблица, в которой перечислены различные поля из базы данных клиентов. Я хотел бы добавить новый столбец с серым флагом (указывает на отсутствие проблем) Если пользователь щелкает флаг, я бы хотел, чтобы флаг стал красным (указывает на наличие проблемы)

Я использую 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);
            }
        }

1 Ответ

0 голосов
/ 19 ноября 2018

Это зависит от структуры вашей таблицы, но вам нужно создать либо новое свойство в вашем массиве для каждой строки, либо новый массив той же длины, что и исходный.Затем просто добавьте новый столбец и обнаружите любые изменения этого нового свойства / массива.

Вот простая демонстрация (нажмите на текст Значок , чтобы изменить флаг): 

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