I'm needing to filter images based on category in the model. I've created buttons for the category. E.g. if user presses Lake Pics button, would like it to filter all of the images with the category 'lake' in the model or if Family Pics selected, filter all of the images with category 'family' etc. All of the examples I've found and researched have static image links within the HTML. But i would like to derive everything from the model. What would be the best way to approach this programatic?
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Picture Gallery</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/gallery.js"></script>
<div ng-controller = "MainController as vm">
<div class = "container">
<div class = "row">
<div class = "col-md-12" id ="myBtnContainer">
<button class = "btn active" onclick =
"filterSelection('all')"> Show all </button>
<button class = "btn active" onclick =
"filterSelection('lake')"> Lake Pics </button>
<button class = "btn active" onclick =
"filterSelection('family')"> Family Pics </button>
<button class = "btn active" onclick =
"filterSelection('kids')"> Kid Pics </button>
</div>
</div>
<div class = "row">
<div class = "col-md-12">
<div class = "thumbnail">
</div>
</div>
<div ng-repeat = "image in vm.options.imageList">
<img ng-src="{{image.images}}" hspace ="15" vspace ="10">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCategory=selectCategory;
vm.options = {
imageList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg',
caption: 'sleepy',
category: 'family'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg',
caption: 'sleepy',
category: 'family',
},
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg',
caption: 'cuddly',
category: 'family'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg',
caption: 'sleepy',
category: 'lake'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg',
caption: 'sleepy',
category: 'lake'
}
],
};
function selectCategory(pos) {
vm.selectedCategory = pos;
};
});
There are few mistakes in your code,
(i) Use ng-click instead of click with angularjs
(ii)Place the ng-repeat outside so that changes with filter gets reflected
(iii) Use Angularjs filter instead of building your own
DEMO
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCategory=selectCategory;
vm.options = {
imageList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg',
caption: 'sleepy',
category: 'family'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg',
caption: 'sleepy',
category: 'family',
},
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg',
caption: 'cuddly',
category: 'family'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg',
caption: 'cuddly',
category: 'lake'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg',
caption: 'sleepy',
category: 'lake'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg',
caption: 'sleepy',
category: 'lake'
}
],
};
function selectCategory(pos) {
vm.selectedCategory = pos;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Picture Gallery</title>
<div ng-controller = "MainController as vm">
<div class = "container">
<div class = "row">
<div class = "col-md-12" id ="myBtnContainer">
<button class = "btn active" ng-click =
"vm.selectCategory('all')"> Show all </button>
<button class = "btn active" ng-click =
"vm.selectCategory('lake')"> Lake Pics </button>
<button class = "btn active" ng-click =
"vm.selectCategory('family')"> Family Pics </button>
<button class = "btn active" ng-click =
"vm.selectCategory('kids')"> Kid Pics </button>
</div>
<div class = "row">
<div class = "col-md-12">
<div class = "thumbnail">
</div>
</div>
<div ng-repeat = "image in vm.options.imageList | filter: { category: vm.selectedCategory }">
<img ng-src="{{image.images}}" hspace ="15" vspace ="10">
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm still very basic with AngularJS (and programming in general honestly speaking. Having watched some videos online, I'm trying to understand the controller concept with the below example (e.g. passing an array and then iterating through it with ng-repeat). Have gone over this for the past hour and it works without the controller (e.g. with the array), but not when adding the array in a seperate script. Can anyone help me find my error in logic here - it literally is the same as the video, but I cannot see the error (or even a typo) and feel this is so fundamental, I should have this working, before moving on to the next steps.
Many thanks for any of your help:
<html ng-app>
<head><title>My First Page</title></head>
<body >
<div class="container" ng-controller="SimpleController">
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers"> {{ cust.name }} </li>
</ul>
</div>
<script src="script/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
}
</script>
</body>
</html>
You are using global declaration of controller which is with angular 1.1 version. If you use version above 1.3 , you should declare the controller as follows,
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});
DEMO
var app = angular.module('testApp',[]);
app.controller('SimpleController',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div class="container" ng-controller="SimpleController">
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers"> {{ cust.name }} </li>
</ul>
</div>
</body>
I am new to AngularJS. I am trying to work out an example of a SportsStore app from a book I am following.
In this app, there are several categories of products. Categories are also displayed on the left side of the view.
Clicking a "category" is going to filter the products by category and is going to highlight the Category button.
Reading tutorials on net I understand that the "controller as" syntax is being favored over the "$scope" syntax.
How do I pass a filter (categoryFilterFn) to my controller function for filtering the products by category?
app.html
<!DOCTYPE html>
<html ng-app="SportsStoreApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" />
<script src='app.js'></script>
<script src='customFilters.js'></script>
<script src='productListControllers.js'></script>
</head>
<body ng-controller="SportsStoreCtrl as controller">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="panel panel-default row" ng-controller="ProductListCtrl">
<div class="col-xs-3">
<a ng-click="selectCategory()"
class="btn btn-block btn-default btn-lg">Home</a>
<a ng-repeat="item in controller.data.products | orderBy:'category' | unique_selection:'category'"
ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
ng-class="getCategoryClass(item)">
{{item}}
</a>
</div>
<div class="col-xs-8">
<div class="well" ng-repeat="item in controller.data.products | filter:categoryFilterFn">
<h3>
<strong>{{item.name}}</strong>
<span class="pull-right label label-primary">
{{item.price | currency}}
</span>
</h3>
<span class="lead">{{item.description}}</span>
</div>
</div>
</div>
</body>
</html>
customFilters.js
angular.module("customFilters", [])
.filter("unique_selection", function(){
return function(data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val])) {
keys[val] = true;
results.push(val);
}
}
return results;
} else {
return data;
}
}
});
app.js
var app = angular.module("SportsStoreApp", ['customFilters']);
app.controller("SportsStoreCtrl", function(){
this.data = {
products: [
{ name: "Product #1", description: "A product",
category: "Category #1", price: 100 },
{ name: "Product #2", description: "A product",
category: "Category #1", price: 110 },
{ name: "Product #3", description: "A product",
category: "Category #2", price: 210 },
{ name: "Product #4", description: "A product",
category: "Category #3", price: 202 }
]
};
});
productListControllers.js
angular.module("SportsStoreApp")
.constant('productListActiveClass', "btn-primary")
.controller('ProductListCtrl', function($scope, $filter, productListActiveClass) {
var selectedCategory = null;
$scope.selectCategory = function(newCategory) {
selectedCategory = newCategory;
};
$scope.categoryFilterFn = function(product) {
return selectedCategory == null ||
product.category == selectedCategory;
};
$scope.getCategoryClass = function(category) {
return selectedCategory = category ? productListActiveClass : "";
};
});
In productListControllers.js, how do I not use "$scope" object and use "this" object along with "$filter" argument? Also, how can I use "ProductListCtrl as product_ctrl" in app.html?
If you want to use your custom filter inside a controller, simply inject your custom filter into your controller using the name of your filter and the suffix Filter.
In your instance you need to inject unique_selectionFilter. You can then use it in your controller passing in your data and property name values:
unique_selectionFilter(data, propertyName)
Alternatively you can inject the $filter service and access your filter through it by passing in it's name:
$filter('unique_selection')(data, propertyName)
I want show "experience level list" in col - lg - 3 and update data in col - lg - 8.updated output should be display on the col-lg-8 when user select check box from the col-lg-3.I have try the code please help me.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js">
</script>
<script src="https://code.angularjs.org/1.5.0-beta.0/angular-route.min.js"> </script>
</head>
<body>
<div ng-app="demo">
<div class="container">
<div class="col-lg-3">
</div>
<div class="col-lg-9">
<div ng-controller="myCtrl">
<b>Experience Level:</b>
<div ng-repeat="cat in getCategories()">
<b><input type="checkbox" ng-model="filter[cat]" /> {{cat}}</b>
</div>
<hr /> Your Search Results: {{filtered.length}}
<br>
<br>
<div class="row">
<div class="col-lg-12" ng-repeat="w in filtered=(experience | filter:filterByCategory)">
{{w.name}}
<hr />
</div>
</div>
<div>
</div>
</div>
</div>
<script>
var app = angular.module('demo', ['ngRoute']);
app.controller('myCtrl', function($scope, $http) {
$scope.experience = [{
name: "Java developer",
category: "Entry Level ($)"
}, {
name: "Mean-Stack developer",
category: "Entry Level ($)"
}, {
name: "Java developer",
category: "Entry Level ($)"
}, {
name: "web developer",
category: "Entry Level ($)"
}, {
name: "java developer",
category: "Intermediate ($$)"
}, {
name: "Mean-Stack developer",
category: "Intermediate ($$)"
}, {
name: ".net developer",
category: "Intermediate ($$)"
}, {
name: "WCF developer",
category: "Expert ($$$)"
}, {
name: "Spring developer",
category: "Expert ($$$)"
}, {
name: "UI/UX ",
category: "Entry Level ($)"
}
];
$scope.filter = {};
$scope.getCategories = function() {
return ($scope.experience || []).map(function(w) {
return w.category;
}).filter(function(w, idx, arr) {
return arr.indexOf(w) === idx;
});
};
$scope.filterByCategory = function(experience) {
return $scope.filter[experience.category] || noFilter($scope.filter);
};
function noFilter(filterObj) {
for (var key in filterObj) {
if (filterObj[key]) {
return false;
}
}
return true;
}
});
</script>
</body>
</html>
try this code and let me know if it works for you ..
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js">
</script>
<script src="https://code.angularjs.org/1.5.0-beta.0/angular-route.min.js"> </script>
</head>
<body>
<div ng-app="demo">
<div ng-controller="myCtrl">
<div class="container">
<div class="col-lg-3">
<b>Experience Level:</b>
<div ng-repeat="cat in getCategories()">
<b><input type="checkbox" ng-model="filter[cat]" /> {{cat}}</b>
</div>
</div>
<div class="col-lg-8">
<hr /> Your Search Results: {{filtered.length}}
<br>
<br>
<div class="row">
<div class="col-lg-12" ng-repeat="w in filtered=(experience | filter:filterByCategory)">
{{w.name}}
<hr />
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = angular.module('demo', ['ngRoute']);
app.controller('myCtrl', function($scope, $http) {
$scope.experience = [{
name: "Java developer",
category: "Entry Level ($)"
}, {
name: "Mean-Stack developer",
category: "Entry Level ($)"
}, {
name: "Java developer",
category: "Entry Level ($)"
}, {
name: "web developer",
category: "Entry Level ($)"
}, {
name: "java developer",
category: "Intermediate ($$)"
}, {
name: "Mean-Stack developer",
category: "Intermediate ($$)"
}, {
name: ".net developer",
category: "Intermediate ($$)"
}, {
name: "WCF developer",
category: "Expert ($$$)"
}, {
name: "Spring developer",
category: "Expert ($$$)"
}, {
name: "UI/UX ",
category: "Entry Level ($)"
}
];
$scope.filter = {};
$scope.getCategories = function() {
return ($scope.experience || []).map(function(w) {
return w.category;
}).filter(function(w, idx, arr) {
return arr.indexOf(w) === idx;
});
};
$scope.filterByCategory = function(experience) {
return $scope.filter[experience.category] || noFilter($scope.filter);
};
function noFilter(filterObj) {
for (var key in filterObj) {
if (filterObj[key]) {
return false;
}
}
return true;
}
});
</script>
</html>
I want to have inline editing in my kendo-ui grid. Databinding seems to work fine but when I click the Update button after editing something the scope gets updated but the edit dialogs do not disappear. If a click on another edit button it gets into a defunct state. And after all it only does update the scope if I provide at least a dummy function as k-save. And for some reason clicking the Cancel button does update the scope. So the Cancel button does what I would expect from the Update button.
As you may see I want to update the local scope on client side and not send anything to any server.
Can somebody enlighten me about what is going wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
<div id="example" ng-app="gridTestApp" ng-controller="TestController">
<kendo-grid
k-data-source="gridData"
k-columns="gridColumns"
k-on-change="selected = data"
k-selectable="true"
k-editable="editableOptions"
k-schema="gridSchema"
k-save="saveFunction">
</kendo-grid>
<p ng-show="selected">
<label>Artist: <input ng-model="selected.artist" /></label>
<br />
<label>Track: <input ng-model="selected.track" /></label>
</p>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
<br>
</li>
</ul>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
<br>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script>
angular.module("gridTestApp",[ "kendo.directives" ])
.controller("TestController", function($scope){
$scope.gridData = new kendo.data.ObservableArray([
{ artist: "Pink Floyd", track: "The dark side of the Moon" },
{ artist: "The Beatles", track: "I've just seen a face" },
{ artist: "Queen", track: "Innuendo" }
]);
$scope.gridColumns = [
{ field: "artist", title: "Artist" },
{ field: "track", title: "Track" },
{ command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
];
$scope.editableOptions = {mode: "inline", update: true, destroy: true};
$scope.gridSchema = {
model: {
id: "artist",
fields: {
artist: { type: "string", validation: { required: true } },
track: { type: "string", validation: { required: true } }
}
}
}
$scope.saveFunction = function(){
console.log("somehting was modified");
}
});
</script>
</body>
</html>
I have created a plnkr for you.
Your problem is the schema - this is not a grid configuration option but a DataSource configuration option.
I'd suggest creating an actual DataSource instead of an ObservableArray (using a string id might not be ideal either):
$scope.gridData = new kendo.data.DataSource({
data: [{
artist: "Pink Floyd",
track: "The dark side of the Moon"
}, {
artist: "The Beatles",
track: "I've just seen a face"
}, {
artist: "Queen",
track: "Innuendo"
}],
schema: {
model: {
id: "artist",
fields: {
artist: {
type: "string",
validation: {
required: true
}
},
track: {
type: "string",
validation: {
required: true
}
}
}
}
}
});
(demo)
I am new to Angular and am stuck on my next step of development which is to have a custom control bound to a dynamic row-column table.
I have a simple fiddle here which shows how to data bind a custom control:
http://jsfiddle.net/paull3876/WPWAc/2/
And another fiddle here which is my starting point, shows how to bind a row-column table with data driven column names:
http://jsfiddle.net/paull3876/3mz5L/1/
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
function datacontroller($scope, $http)
{
$scope.mydata = [{f1:"r1f1", f2:"r1f2"}, {f1:"r2f1",f2:"r2f2"}, {f1:"r3f1",f2:"r3f2", f3:"Hello"}];
$scope.mycolumns = [{name:"Column 1", fieldname:"f1"}, {name:"Column 2", fieldname:"f2"}, {name:"Column 3", fieldname:"f3"}];
$scope.showdata = function()
{
alert(JSON.stringify($scope.mydata));
}
$scope.getcolumnname = function(cell)
{
return cell.fieldname;
}
}
</script>
</head>
<body>
<div data-ng-controller="datacontroller">
<table>
<tr>
<td data-ng-repeat="cell in mycolumns">{{cell.name}}</td>
</tr>
<tr data-ng-repeat="record in mydata">
<td data-ng-repeat="cell in mycolumns">
<input type="text" data-ng-init="mycol=getcolumnname(cell);" data-ng-model="record[mycol]" />
</td>
</tr>
</table>
<br />
<input type="button" value="Save Data" ng-click="showdata()" />
<br />
<br />
</div>
</body>
</html>
Now I want to take the second fiddle above, and replace the INPUT element with a user control which has two way data binding. I've spend a day on this already and can't get it working, so I guess I'm also needing some help on the concepts here
An explanation on top of a solution greatly appreciated.
http://jsfiddle.net/paull3876/rc7uC/1/
Here's the full working solution, I hope someone finds it useful.
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>Angular</title>
<!--scr ipt src="htt ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="datacontroller">
<table>
<tr>
<td data-ng-repeat="cell in mycolumns">{{cell.name}}</td>
</tr>
<tr data-ng-repeat="record in mydata">
<td data-ng-repeat="cell in mycolumns">
<mycontrol data-my-model="record[cell.fieldname]"></mycontrol>
</td>
</tr>
</table>
<br />
<input type="button" value="Save Data" ng-click="showdata()" />
<input type="button" value="Change Divs" onclick="changediv()" />
<input type="button" value="Change Scope" onclick="changescope()" />
<br />
<br />
</div>
</body>
</html>
<script>
var globalscope;
var app = angular.module("myApp", [])
.directive("mycontrol", function ($compile) {
return {
restrict: "E",
scope: {
value: "=myModel"
},
template: "<div data-ng-bind='value'/>"
};
});
function datacontroller($scope, $http) {
globalscope = $scope;
var mydata = [];
// generate some data
for (var i = 0; i < 20; i++)
{
var row = {
f1:"f1x" + i,
f2:"f2x" + i,
f3:"f3x"+i,
f4:"f4x"+i,
f5:"f5x"+i,
f6:"f6x"+i,
f7:"f7x"+i,
f8:"f8x"+i,
f9:"f9x"+i,
f10:"f10x"+i,
f11:"f11x"+i,
f12:"f12x"+i,
f13:"f13x"+i
};
mydata.push(row);
}
// push it to angulars scope
$scope.mydata = mydata;
// generate some metadata for the columns
$scope.mycolumns = [{
name: "Column 1",
fieldname: "f1",
type: "input"
}, {
name: "Column 2",
fieldname: "f2",
type: "textarea"
}, {
name: "Column 3",
fieldname: "f3",
type: "div"
}, {
name: "Column 4",
fieldname: "f4",
type: "div"
}, {
name: "Column 5",
fieldname: "f5",
type: "div"
}, {
name: "Column 6",
fieldname: "f6",
type: "div"
}, {
name: "Column 7",
fieldname: "f7",
type: "div"
}, {
name: "Column 8",
fieldname: "f8",
type: "div"
}, {
name: "Column 9",
fieldname: "f9",
type: "div"
}, {
name: "Column 10",
fieldname: "f10",
type: "div"
}, {
name: "Column 11",
fieldname: "f11",
type: "div"
}, {
name: "Column 12",
fieldname: "f12",
type: "div"
}, {
name: "Column 13",
fieldname: "f13",
type: "div"
}];
$scope.showdata = function () {
alert(JSON.stringify($scope.mydata));
};
$scope.getcolumnname = function (cell) {
return cell.fieldname;
};
}
function changediv()
{
// this will change the data in the divs but it won't reflect back to the scope
var divs = document.getElementsByClassName("fred");
for (var i = 0; i < divs.length; i++)
{
var div = divs[i];
div.innerText = "XXXX";
}
}
function changescope()
{
// shows how to change data programmatically and have it reflected in the controls and in the scope data
var scope = globalscope;
for (r in scope.mydata)
{
scope.mydata[r].f3 = "UUUU";
}
scope.$apply();
}
</script>