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);
}
}
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>
Related
I am trying to use AngularJs with ASP.NET MVC - this is my first attempt.
Index.html
#model string
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" ng-init="courses = [{'name':'first'},{'name':'second'},{'name':'third'}]">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="course in courses">
<td>{{ course.name }}</td>
</tr>
</tbody>
</table>
_Layout.cshtml
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Above works fine and grid is displayed with Name as header and first, second and third as 3 rows. So my next step is to use
courses = #Html.Raw(Json.Encode(Model))
instead of
courses = [{'name':'first'},{'name':'second'},{'name':'third'}]
CourseController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
namespace AngularJsMvc.Controllers
{
public class CoursesController : Controller
{
// GET: Courses
public ActionResult Index()
{
return View("Index", "", "[{'name':'first'},{'name':'second'}, {'name':'third'}]"); //This works fine when used with #Html.Raw(Model) in index.html
//return View("Index", "", GetCourses()); //This doesn't work when used with with #Html.Raw(Model) in index.html
}
public string GetCourses()
{
var courses = new[]
{
new Course { Name = "First" },
new Course { Name = "Second" },
new Course { Name = "Third" }
};
var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
return JsonConvert.SerializeObject(courses, Formatting.None, settings);
}
}
public class Course
{
public string Name { get; set; }
}
}
This works fine if I use
return View("Index", "", "[{'name':'first'},{'name':'second'},{'name':'third'}]");
But if I use
return View("Index", "", GetCourses());
Then, below is the error I get. Please help - I have been struggling for almost entire day yesterday. I tried with or without Json.Encode
angular.min.js:123 Error: [$parse:ueoe]
http://errors.angularjs.org/1.6.4/$parse/ueoe?p0=courses%20%3D
at angular.min.js:6
"<div class="container" ng-init="courses = " [{\"name\":\"first\"},{\"name\":\"second\"},{\"name\":\"third\"}]""="">"
The following worked for me:
<div class="container" ng-init="courses = #Newtonsoft.Json.JsonConvert.DeserializeObject(Model)">
This also works:
<div class="container" ng-init="courses = #HttpUtility.HtmlDecode(Model)">
It's all about how angular treats the object it tries to parse and since you're passing an HTML decoded string it will treat as a string and therefore it won't be able to iterate threw it.
I am trying to populate data through controller and display it in view using angular js. I am using a function to return JSON data and use the data in the view.However i am not getting the data due to some error.
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
namespace Angular4DotnetMvc.Controllers
{
public class CourseController : Controller
{
// GET: Course
public ActionResult Index()
{
return View("Index","",GetCourses());
}
private object GetCourses()
{
var courses = new []{
new CourseVm {Number = "1", Name = "Science", Instructor= "Sai"},
new CourseVm {Number = "2", Name = "Geography", Instructor= "Ram"}
};
var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(courses, Formatting.None, settings);
}
}
public class CourseVm
{
public string Number { get; set; }
public string Name { get; set; }
public string Instructor { get; set; }
}
}
Index.cshtml
#model string
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" ng-app>
<div class="row">
<table class="table table-condensed table-hover">
<tr ng-init="courses = #Html.Raw(Model)">
<th>Course</th>
<th>Course Name</th>
<th>Instructors</th>
</tr>
<tr ng-repeat="course in courses">
<td>{{course.Number}}</td>
<td>{{course.Name}}</td>
<td>{{course.Instructor}}</td>
</tr>
</table>
</div>
</div>
Layout.cshtml
<html>
<head>
<title>Angular4DotNet</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="~/Scripts/jQuery/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap/bootstrap.js"></script>
<link href="~/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/bootstrap/bootstrap.css" rel="stylesheet" />
#RenderSection("JavaScriptInHeader",required:false)
</head>
<body ng-app>
#RenderBody()
</body>
</html>
I am getting the following error:
Error: [$parse:ueoe] http://errors.angularjs.org/1.6.1/$parse/ueoe?p0=courses%20%3D%20%5B%7B
Why the data binding not happening?
The error is :
I am not sure why ="" after "instructor":"ram"}] is being added in the end in #Html.Raw(Model). i believe because of this it fails and agular cannot parse.
I would do on this way:
Create an action just to return the json content:
// GET: Course
public ActionResult Index()
{
return View();
}
public ActionResult GetCourses()
{
var courses = new []{
new CourseVm {Number = "1", Name = "Science", Instructor= "Sai"},
new CourseVm {Number = "2", Name = "Geography", Instructor= "Ram"}
};
return Json(courses, JsonRequestBehavior.AllowGet)
}
Then create an Angular controller:
angular.module('yourApp').controller('CoursesCtrl', ['$scope',function($scope)
{
$scope.courses = [];
$scope.loadCourses = function () {
$http.get('/Course/GetCourses').then(function (response) {
$scope.courses = response.data;
}, function (data) {
//error
});
}
}]);
After that insert the controller in the view:
<div class="container" ng-app="yourApp">
<div ng-controller="CoursesCtrl">
<div class="row">
<table class="table table-condensed table-hover" data-ng-init="loadCourses();">
<tr>
<th>Course</th>
<th>Course Name</th>
<th>Instructors</th>
</tr>
<tr ng-repeat="course in courses">
<td>{{course.Number}}</td>
<td>{{course.Name}}</td>
<td>{{course.Instructor}}</td>
</tr>
</table>
</div>
</div>
</div>
I hope this can help you.
I am trying to make a Dynamic table in Angular.js, in which the user inputs number of columns, in a text box provided. Then add buttons are provided under each column to add as much cells as user wants. The cell will only be added to that column only.
I am using ng-repeat to repeat the number of columns and add buttons.
I am able to get the response of the user in a variable, ie, the column under which the user wants to add the cell.
Can someone please give me a controller to add a cell to the selected column either by using ng-repeat , ng-model or without it.
my table code looks somewhat like this:
<table>
<tr>
<th ng-repeat="n in arr track by $index">SET {{n.setalpha}} </th><!--table heading, dont mind this-->
</tr>
<tr ng-repeat="<!--something goes here-->">
<!--<select ng-model="name" ng-options="options.topicname for options in topics"></select>-->
</tr>
<tr>
<td ng-repeat="n in arr track by $index">
<button ng-click="addSelected($index+1)">add{{$index+1}}</button>
</td>
</tr>
</table>
where: n in arr track by $index , is used to repeat the table heading and add button say 'n' number of times and addSelected($index+1) is a function whose controller is:
$scope.addSelected = function (setno) {
console.log(setno);
$scope.thisset = setno;
}
, $scope.thisset is the variable in which i have the response of the user, ie, the column under which the user wants to add a cell.
NOTE: I want to add the cell in column only under which the user wants. NOT in all columns. MY CODE:
var app = angular.module('topicSelector', []);
app.controller('topicController', function ($scope) {
$scope.arr = [];
$scope.thisset = -1; //tells in which set, cell has to added.
$scope.topics = [
{
topicid: "1",
topicname: "history"
},
{
topicid: "2",
topicname: "geography"
},
{
topicid: "3",
topicname: "maths"
}
];
$scope.DefineSets = function () {
for (var i = 1; i <= $scope.no_of_sets; i++) {
$scope.arr.push({
setno: i,
setalpha: String.fromCharCode(64 + i)
});
};
};
$scope.addSelected = function (setno) {
console.log(setno);
$scope.thisset = setno;
}
});
table {
width: 100%;
}
<!doctype html>
<html ng-app="topicSelector">
<head>
<title>
topic selector
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Enter number of sets:</h3>
<div ng-controller="topicController">
<form ng-submit="DefineSets()">
<input type="text" ng-model="no_of_sets" placeholder="number of sets" name="no_of_sets">
<button>Submit</button>
</form>
<br>
<br>
<table>
<tr>
<th ng-repeat="n in arr track by $index">SET {{n.setalpha}} </th>
</tr>
<!--<tr ng-repeat="">
<select ng-model="name" ng-options="options.topicname for options in topics"></select>
</tr>-->
<tr>
<td ng-repeat="n in arr track by $index">
<button ng-click="addSelected($index+1)">add{{$index+1}}</button>
</td>
</tr>
</table>
</div>
</body>
</html>
LINK TO PLUNK PLUNK
In the following example I used lists instead of tables with fle display, IMHO it is a better approach:
(function (angular) {
"use strict";
function GrowController ($log) {
var vm = this;
vm.cols = [];
vm.size = 0;
vm.sizeChanged = function () {
var size = vm.size, cols = vm.cols,
diff = size - cols.length;
$log.debug("Size changed to", size, cols);
if (diff > 0) {
for (var i = 0; i < diff; i++) {
cols.push([]);
}
} else {
cols.splice(diff, -diff);
}
};
vm.addCell = function (index) {
var cols = vm.cols;
$log.debug("Cell added in column", index);
cols[index].push(index + "." + cols[index].length);
};
}
angular.module("app",[])
.controller("GrowController", ["$log", GrowController]);
}(angular));
ul {
list-style: none;
padding: 0;
margin: 0;
}
.cols {
display: flex;
}
.cells {
display: flex;
flex-direction: column;
}
button.add-cell {
display: block;
}
<div ng-controller="GrowController as $ctrl" ng-app="app" ng-strict-di>
<p>
<label for="size">Number of columns(0-10):</label>
<input id="size" type="number" ng-model="$ctrl.size" ng-change="$ctrl.sizeChanged()" min="0" max="10">
</p>
<ul class="cols" ng-if="$ctrl.cols.length">
<li ng-repeat="col in $ctrl.cols">
<button class="add-cell-button" ng-click="$ctrl.addCell($index)">Add cell</button>
<ul class="cells" ng-if="col.length">
<li ng-repeat="cell in col">{{ ::cell }}</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Anyway, I Angularjs 1.5.6 you should consider using "Components" instead of "Controllers" and "one-side" bindings.
I have a List in my controller which is being of type Student(class in the model)
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
List<Student> obj = new List<Student>() {
new Student() { ID=1,Name="titi",Address="bbsr"},
new Student() { ID=1,Name="titi1",Address="bbsr"},
new Student() { ID=1,Name="titi2",Address="bbsr"}
};
ViewBag.data = obj;
return View();
}
}
I am using Angular JS (Beginner to Angular JS)
<html>
<head>
<title>Index</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="EFView">
#{ var a = ViewBag.data;}
<div ng-init="init(#Html.Raw(a)">
<table>
<tr ng-repeat="x in a">
<td >
{{x.ID}}
</td>
<td>
{{x.Name}}
</td>
<td>
{{x.Address}}
</td>
</tr>
</table>
</div>
</body>
</html>
Not getting the output as expected.. where & what I am missing, I tried with all trial
My static html table has a row click event which hightlights a div.
The static table is working fine, but my ng-repeat table has some issues.
I can now highlight my div with a red border, but how do I remove the border when something else is clicked ?
Here's the static table example :
<script type="text/javascript">
$('.image-clicked').click(function () {
debugger;
$(this).css("border", "2px solid red");
});
$('.clickable_row td div').click(function (e) {
// clear all borders first, highlight clicked image
var imageclicked = $(this).data('url');
$('.propertyTable td div').css("border", "none");
$(this).css("border", "2px solid red");
});
</script>
<table id="gadgets" class="propertyTable clickable_row">
<tr>
<th>Type</th>
</tr>
<tr>
<td data-url="chart_treelist">
<div><img data-draggable id="chart_treelist" src="images2/table.png" title="Tree Grid" alt="Hierarchy Grid" width="64" height="64">Grid</div>
</td>
<td data-url="{chart_pivot}">
<div><img data-draggable id="chart_pivot" src="images2/pivottable.png" title="Pivot Table" alt="Pivot Table" width="64" height="64">Pivot</div>
</td>
</tr>
<tr>
<td>
<div><img data-draggable id="chart_bar" src="images2/bar.png" title="Bar" width="64" height="64">Bar</div>
</td>
<td>
<div><img data-draggable id="chart_line" src="images2/line.fast.png" title="Line" >Line</div>
</td>
</tr>
<tr>
<td>
<img data-draggable id="chart_pie" src="images2/pie.png" title="Pie" alt="Pie" width="64" height="64">Pie
</td>
<td><img data-draggable id="chart_area" src="images2/area.png" title="Area" alt="Area" width="64" height="64">Area</td>
</tr>
<tr>
<td>
<img data-draggable id="chart_scatter" src="images2/point.png" title="Scatter" width="64" height="64">Scatter
</td>
<td>
<img data-draggable id="chart_bubble" src="images2/bubble.png" title="Bubble" width="64" height="64">Bubble
</td>
</tr>
</table>
And here is the AngularJS ng-repeat generated table.
FYI: ng-class assigns the image-border class if the initImage values are equal. ng-click goes into the controller and reassigns the chart based on what was just selected.
PROBLEM: I cannot figure out how to select a NEW chart icon with red border, and simultaneously REMOVE the image-border class on the others.
(function () {
'use strict';
angular.module('rage')
.controller('GadgetIconsCtrl', ['$rootScope', '$scope', icons]);
function icons($rootScope, $scope) {
var gadgets = this;
gadgets.subset = null;
gadgets.chartSelected = null;
gadgets.selectChart = function (chart) {
// the assumption is that user selected a different chart icon from the formatting tab
gadgets.chartSelected = chart;
};
if ($scope.widget.gadgetType == 'chart' && $scope.widget.chartType == 'bar') {
// user is configuring a bar chart type, so we also include 'column' in our subset of icons to display
gadgets.subset = _.filter($scope.widgetDefs, function (item) {
return item.chartType == 'bar' || item.chartType == 'column';
});
}
}; // end of gridSettings()
})();
<style scoped>
.image-clicked {
border: 2px solid red;
}
.image-unclicked {
border: 2px solid red;
}
</style>
<table ng-controller="GadgetIconsCtrl as gadgets" >
<tr ng-repeat="gadget in gadgets.subset" >
<td>
<!-- the image icon for this widget should have a css border, otherwise none -->
<div ng-class="{'image-border': gadget.initImage===widget.initImage}">
<img ng-click="gadgets.selectChart(gadget.name)" ng-src="{{gadget.initImage}}" title="{{gadget.title}}"
width="64" height="64">{{gadget.title}}
</div>
</td>
</tr>
</table>
I'm sure there's a better Angular approach to this, but I'm still trying to figure out the best use of ng-click and ng-class in this use-case.
Help is appreciated.
thanks,
Bob
I started a new plnkr http://plnkr.co/edit/w3Ojy5Eo40QHDtUxJfft
for your question.
You can use ng-clik and inject click event (and affected element) into the handler:
$scope.widgetClick = function($event) {
$event.srcElement.style.border = "2px black solid";
}
Corresponding html:
<div class="image-clicked" ng-click="widgetClick($event)"> ... </div>
For simple dom manipulation, like adding or removing a css class, its better to use angular only instead of mixing things up with jQuery.
Dealing with dom/css changes by yourself is more "jQuery way".
With Angular on the other hand, you will change the data for your model and
let the framework do the dom/css work.
For your example (using my plunkr code):
Define widget for ng-repeat as something like:
{
title : "Foobar ",
initImage : "http://lorempixel.com/10/10/",
clicked: false
}
and change clicked in the handler:
$scope.widgetClick = function(widget) {
widget.clicked = true;
};
Corresponding html:
<div ng-click="widgetClick(widget)" ng-class="{clicked: widget.clicked}">
The css class .clicked will be added by angular if widget.clicked changes to true.
Why this is better? No Css/Dom manipulation in your code. Everything clean and nice.
EDIT:
How to remove the .clicked class from previously selected widget?
We will need to keep a reference to the selected widget in the controller:
var selectedWidget = null;
$scope.widgetClick = function(w) {
if(selectedWidget) selectedWidget.clicked = false;
selectedWidget = w;
w.clicked = true;
};
Now, when another widget is selected (clicked), we only need to update the model data: Set the clicked property on the previously selected widget to false and change it to true on the selected one. And update the reference to the selectedWidget. Angular will take care about the css.
Updated plnkr http://plnkr.co/edit/IqWc1W9N12SH8K72jAun?p=preview
Try this !! cannot run angular now, but I think it should work!
< script type = "text/javascript" >
var lastobj = "";
function clickImage(obj, $event) {
debugger;
if (lastobj != obj) {
$(lastobj).css("border", "0px");
} else {
$($event.target).css("border", "2px solid red");
}
};
function clickRow(obj, $event) {
//obj should be the widget
//There you should do similar..
var imageclicked = $($event.target).data('url');
$('.propertyTable td div').css("border", "none");
$($event.target).css("border", "2px solid red");
}); < /script>
<table ng-controller="GadgetIconsCtrl as gadicons">
<tr ng-repeat="widget in gadicons.widgetSubset">
<td>
<div ng-click="clickRow(widget)" class="image-clicked">
<img data-draggable ng-click="clickImage(widget)" ng-src="{{widget.initImage}}" title="{{widget.title}}" width="64" height="64">{{widget.title}}
</div>
</td>
</tr>
</table>
EDIT
I added the unset border functionality u told, and corrected some spelling and grammar mistakes for angularjs.
Hope it works!!