Click flag to highlight issue
up vote
-1
down vote
favorite
I have a table that lists various fields from a customer database. I'd like to add a new column with a grey flag (indicates no issues) If the user clicks the flag I'd like the flag to turn red (indicates there is an issue)
I'm using MVC, Angularjs and Font Awesome.
Could someone point me in the best direction please?
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);
}
}
angularjs asp.net-mvc font-awesome
add a comment |
up vote
-1
down vote
favorite
I have a table that lists various fields from a customer database. I'd like to add a new column with a grey flag (indicates no issues) If the user clicks the flag I'd like the flag to turn red (indicates there is an issue)
I'm using MVC, Angularjs and Font Awesome.
Could someone point me in the best direction please?
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);
}
}
angularjs asp.net-mvc font-awesome
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I have a table that lists various fields from a customer database. I'd like to add a new column with a grey flag (indicates no issues) If the user clicks the flag I'd like the flag to turn red (indicates there is an issue)
I'm using MVC, Angularjs and Font Awesome.
Could someone point me in the best direction please?
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);
}
}
angularjs asp.net-mvc font-awesome
I have a table that lists various fields from a customer database. I'd like to add a new column with a grey flag (indicates no issues) If the user clicks the flag I'd like the flag to turn red (indicates there is an issue)
I'm using MVC, Angularjs and Font Awesome.
Could someone point me in the best direction please?
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);
}
}
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);
}
}
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);
}
}
angularjs asp.net-mvc font-awesome
angularjs asp.net-mvc font-awesome
edited 2 days ago
asked 2 days ago
QBALL777
32
32
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
It depends on your table structure, but you need to create either a new property in your array, for each row, or a new array with the same length as the original one. Then simply add a new column and detect any changes to that new property/array.
Here is a simple demo (click on text Icon to change the flag):
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>
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
It depends on your table structure, but you need to create either a new property in your array, for each row, or a new array with the same length as the original one. Then simply add a new column and detect any changes to that new property/array.
Here is a simple demo (click on text Icon to change the flag):
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>
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
add a comment |
up vote
0
down vote
It depends on your table structure, but you need to create either a new property in your array, for each row, or a new array with the same length as the original one. Then simply add a new column and detect any changes to that new property/array.
Here is a simple demo (click on text Icon to change the flag):
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>
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
add a comment |
up vote
0
down vote
up vote
0
down vote
It depends on your table structure, but you need to create either a new property in your array, for each row, or a new array with the same length as the original one. Then simply add a new column and detect any changes to that new property/array.
Here is a simple demo (click on text Icon to change the flag):
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>
It depends on your table structure, but you need to create either a new property in your array, for each row, or a new array with the same length as the original one. Then simply add a new column and detect any changes to that new property/array.
Here is a simple demo (click on text Icon to change the flag):
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>
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>
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>
answered 2 days ago
Aleksey Solovey
3,5203726
3,5203726
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
add a comment |
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
Thank you so much for your help, most appreciated. Unfortunately I'm a little unsure how to add the code section into my controller. I understand the new column in the table. I've added my controller code to my original comment. Many thanks
– QBALL777
2 days ago
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373643%2fclick-flag-to-highlight-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown