I am learning Angular and using the UI grid where I populate the grid from a simple loop method in the ShopplingList controller. The grid is displayed with the column headings but the data is not and I have no errors in chrome when I hit F12. Any help on where I am going wrong!!
My HTML and Javascript
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.gridOptions1 = {};
$scope.gridOptions1.columnDefs = [{
name: 'ID'
}, {
name: 'Shopping Item'
}];
$http.get("/ShoppingList/getShoppingItems/")
.success(function(data) {
$scope.gridOptions1.data = data;
}).error(function(error) {
console.log(error);
});
}
]);
body {} .grid {
width: 1500px;
height: 450px;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" charset="UTF-8" />
<title>ShoppingList</title>
</head>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ui-grid.min.js"></script>
<script src="~/Scripts/Irlca/ShoppingList.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" type="text/css" />
<link href="~/Content/main.css" rel="stylesheet" type="text/css" />
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>
</body>
</html>
My Model
public class ShoppingListModel
{
public int id { get; set; }
public string shoppingItem { get; set; }
}
My Controller
public class ShoppingListController : Controller
{
//
// GET: /ShoppingList/
public ActionResult ShoppingList()
{
return View("ShoppingList");
}
public ActionResult getShoppingItems()
{
List<ShoppingListModel> lstRes = new List<ShoppingListModel>();
for (int i = 0; i < 10; i++)
{
ShoppingListModel tsk = new ShoppingListModel();
tsk.id = i * 10;
tsk.shoppingItem = "Milk" + i.ToString();
lstRes.Add(tsk);
}
return Json(lstRes, JsonRequestBehavior.AllowGet);
}
}
Assuming your get method receives the requested entities, there is one thing missing in your ui-grid configuration: the entity's field. This is set in columnDefs property and is in charge of connecting the name property (which will be the column header) to the actual entity field.
Try this:
$scope.gridOptions1.columnDefs = [{
name: 'ID',
field: 'id'
}, {
name: 'Shopping Item',
field: 'shoppingItem'
}];
Related
I have a list of names from the model that are listed on the page when the page loads. When i click the name, the corresponding image from the model appears on the page. Is there a way within this to load an initial
image [0]when the page loads? This could be a random image or the first image in the model data set.
<!DOCTYPE html>
<html ng-app = "myApp"><head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
</div>
<hr>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src ="{{vm.selectedCat.images}}">
</div>
</div>
</div>
</body>
</html>
JS
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
});
Load first image by setting vm.selectedCat just below vm.options
vm.selectedCat = vm.options.catList[0];
Below is the jsfiddle link for your reference
jsfiddle : https://jsfiddle.net/Lpaudwf8/21/
Can you Try this :-
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
function Init(){
vm.selectedCat = vm.options.catList[0];
}
Init();
});
I would like to the ui-grid row select feature to set the value of a column in the clicked row.
I have a column in the DB named omit. I would like that value to equal the state of the selected row, so if the row is selected then omit = 1, if row is not selected then omit = 0. I think I have this part figured out (however I'm always open to better ideas!).
gridApi.selection.on.rowSelectionChanged($scope,function(row){
if(row.isSelected){
row.entity.omit = 1;
}
if(!row.isSelected){
row.entity.omit = 0;
}
// now save to database...
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
angular.forEach(rows, function(value, key) {
if(value.isSelected){
value.entity.omit = 1;
}
if(!value.isSelected){
value.entity.omit = 0;
}
// now save to database...
});
});
What I haven't been able to figure out is how the select the row when the grid is first loaded.
So, on the initial load of the grid, how do I select the row if the value of omit is 1?
You can use the gridApi.selection.selectRow method, but you have to wait until the grid has digested the data for it to work. So you either have to set it on an $interval (or after a $timeout) to keep running while the grid digests the data, or you can call gridApi.grid.modifyRows($scope.gridOptions.data) before you call selectRow... to be honest, I'm not sure why you have to call that.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);
app.controller('gridCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
$scope.gridOptions.columnDefs = [
{ name: 'omit' },
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' }
];
$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
if(row.isSelected){
row.entity.omit = 1;
}
if(!row.isSelected){
row.entity.omit = 0;
}
// now save to database...
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
angular.forEach(rows, function(value, key) {
if(value.isSelected){
value.entity.omit = 1;
}
if(!value.isSelected){
value.entity.omit = 0;
}
// now save to database...
});
});
};
$scope.toggleRowSelection = function() {
$scope.gridApi.selection.clearSelectedRows();
$scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
_.forEach(data, function(row) {
row.omit = 0;
});
/* arbitrarily setting the fourth row's omit value to 1*/
data[3].omit = 1;
$scope.gridOptions.data = data;
/* using lodash find method to grab the row with omit === 1 */
/* could also use native JS filter, which returns array rather than object */
var initSelected = _.find($scope.gridOptions.data, function(row) { return row.omit === 1; });
$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.selectRow(initSelected);
/**
* OR:
* $interval( function() {
* $scope.gridApi.selection.selectRow(initSelected);
* }, 0, 1);
*/
});
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="lodash.js#4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="gridCtrl">
<div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
</div>
</body>
</html>
I have object like this i need to get "GetToolInfo" name:
{"GetToolInfo":{
"Item":[
{
"_Key":"DefaultPath",
"_Value":"C:\\Users\\vkedarix\\Desktop\\TAT\\Host\\DefaultWorkSpace.xml"
},{
"_Key":"IsLicenseAgreed",
"_Value":"1"
}
]
}
}
Hi, This sample show to you how can get keys from object:
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $filter) {
var foo = {
"GetToolInfo": {
"Item": [
{
"_Key": "DefaultPath",
"_Value": "C:\\Users\\vkedarix\\Desktop\\TAT\\Host\\DefaultWorkSpace.xml"
}, {
"_Key": "IsLicenseAgreed",
"_Value": "1"
}
]
}
};
for (var key in foo) {
console.log(key);
$scope.key = key
}
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
{{key}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
I am having an issue with using ng-hide. With all of the code below, I am able to get everything working the way I want it to until I add the ng-hide attribute, at which point it refuses to show ANY of the images. If I leave it out, the images all show up like I expect, leaving me to believe my controller is working correctly and I have hooked into it correctly. What am I not understanding? Also, you will see I put an alert in the function to make sure it is being called, but I cannot for the life of me get an alert box to work using angular.
app.js
(function () {
var app = angular.module("mainApp", []);
app.controller("StoriesListController", ["$http", StoriesListController]);
function StoriesListController($http) {
var vm = this;
vm.title = "Tutorial List";
vm.imageIndex = 0;
activate();
function activate() {
vm.stories = [];
$http.get("api/Story").then(function (response) {
vm.stories = response.data;
});
}
vm.setCurrentImage = function (index) {
vm.imageIndex = index;
};
vm.isCurrentImage = function (index) {
alert(index);
return vm.imageIndex === index;
};
}
}());
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
<link href="/Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>TEST</h1>
<div ng-controller="StoriesListController as vm">
<h1>{{vm.title}}</h1>
<div class="container slider">
<div ng-repeat="story in vm.stories">
<img ng-src="{{story.PreviewImageURL}}" ng-hide="!isCurrentImage($index)" class="slide" />
</div>
</div>
</div>
</body>
</html>
StoryController.cs (the API I am calling to fill stories)
namespace AngularWebApi.Controllers
{
public class StoryController : ApiController
{
private static readonly List<Story> apps = new List<Story>
{
new Story
{
ID = 1,
Name = "Test 1",
Descript = "Test 1 Desc",
PreviewImageURL = "/Images/Test1.png",
Views = 1,
Ranking = 1
},
new Story
{
ID = 2,
Name = "Test 2",
Descript = "Test 2 Desc",
PreviewImageURL = "/Images/Test2.png",
Views = 1,
Ranking = 2
},
new Story
{
ID = 3,
Name = "Test 3",
Descript = "Test 3 Desc",
PreviewImageURL = "/Images/Test3.png",
Views = 1,
Ranking = 3
},
};
public IHttpActionResult Get()
{
return Ok(apps);
}
}
}
I think you just miss vm. Try ng-hide="!vm.isCurrentImage($index)".
This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'gender', cellFilter: 'mapGender' },
{ field: 'company' },
{ field: 'email' },
{ field: 'phone' },
{ field: 'age' },
{ field: 'mixedDate' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
$scope.gridOptions.data[0].age = -5;
data.forEach( function addDates( row, index ){
row.mixedDate = new Date();
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
row.gender = row.gender==='male' ? '1' : '2';
});
});
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'company', 'email' ].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<input ng-model='filterValue'/><button ng-click='filter()'>Filter</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code first ui-grid structure display then after data will bind to the ui-grid, but i want to display entire grid with structure after loading data.
this is my plunker http://plnkr.co/edit/?p=preview
A popular design is to show loading status when data is not yet loaded, to do so, you could add a dataLoaded flag to control when the grid is ready, set the flag as true in the success callback of $http.get. See the below:
$scope.dataLoaded = false;
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json').success(function(data) {
// ...
$scope.dataLoaded = true;
});
and in your template, it could be as:
<div id="grid1" ui-grid="gridOptions" class="grid" ng-show="dataLoaded"></div>
<div ng-hide="dataLoaded">Loading...</div>