I am new to anuglar Js. I am trying to figure out How do i change the property value.
$scope.dashboards = {
"1": {
"widgets": [{
"row": 0,
"col": 0,
"sizeX": 2,
"sizeY": 1,
"name": "Canvas 1",
"canvas": "canvas_1",
"show": true
}, {
"row": 0,
"col": 2,
"sizeX": 2,
"sizeY": 1,
"name": "Canvas 2",
"canvas": "canvas_2",
"show": true
}]
}
}
On ng-click , i want to change the value of key "show" to false.
<div gridster-item="widget" ng-repeat="widget in dashboard.widgets">
<i ng-click="changeValue(widget)" class="glyphicon glyphicon-trash">
</div>
$scope.changeValue= function (widget) {
.....How to??
};
Since you are already passing the current widget as a parameter, you can do Like this
$scope.changeValue= function (widget) {
widget.show = false;
};
I would not pass the widget. Instead I would pass its $index:
<i ng-click="changeValue($index)" class="glyphicon glyphicon-trash">
And then:
$scope.changeValue= function (index) {
$scope.dashboards.1.widgets[index].show = ...
};
It's look like your array in ng-repeat is undefined in scope.
You should update your codes like below;
<div gridster-item="widget" ng-repeat="widget in dashboards.1.widgets">
<i ng-click="changeValue(widget)" class="glyphicon glyphicon-trash">
</div>
After you get related object and update show property in $scope like below:
$scope.changeValue= function (widget) {
$scope.dashboards.1.widgets[widget].show = false;
};
Simply,
$scope.changevalue= function(widget){
for (var i = 0; i < $scope.dashboards.length; i++) {
for (var j = 0; j < $scope.dashboards[i].widgets.length; j++) {
if ($scope.dashboards[i].widgets[j].ID == widget.ID){
$scope.dashboards[i].widgets[j].show= false
}
};
};
}
Related
HTML CODE:
<div>
<md-button ng-click="getCheckedItems()">TEST</md-button>
</div>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem">
<span k-template>
<md-checkbox !important ng-click='click(dataItem)'>{{ dataItem.text}}</md-checkbox>
</span>
</div>
I want to get the checked items from the treeview and save it as string with ',' between 2 texts using the get function $scope.getCheckedItems = function(){}
Your question is not very clear, but in case if you want to get all the selected checkboxes inside your controller you can do like following.
$scope.getCheckedItems = function () {
var data = $scope.tree.dataSource._data;
for (var i = 0, j = data.length; i < j; i++) {
if (data[i].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i]);
}
}
};
I found out that i need to specify 'items' as child. Here is the working code:
for (var i = 0, j = data.length; i < j; i++) {
for (var x = 0, y = data[i].items.length; x < y; x++)
{
if (data[i].items[x].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i].items[x].text);
}
}
}
Sample data:
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar" }
] },
{ text: "baz", expanded: true, items: [
{ text: "qux" }
] }]
I want to use a $scope variable within the ng-repeat attribut, like so :
<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in {{usersOpinion}}">
But it doesnt seem to work, {{usersOpinion}} remains non-interpreted... How could I manage to make it work?
The Idea is to dynamically change {{usersOpinion}} when clicking on button.
Thanks
Instead of ng-repeat="userOpinion in {{usersOpinion}}" ,change it to ng-repeat="userOpinion in usersOpinions.
You should use like
<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinions">{{userOpinion}}</div>
It should be enough to remove the curly brackets. The ng-repeat is interpreted as code.
<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion">
The curly brackets tells angular that it should transform the variable into a string before outputting it.
If you want to change it dynamically you need to add ng-click to div tag, something like this
<div class="userOpinion" ng-if="usersOpinions.length != 0" ng-repeat="userOpinion in usersOpinion" ng-click="changeOpinion($index)">
{{userOpinion}}
</div>
and add function to scope
$scope.changeOpinion = function (index) {
$scope.usersOpinion[index] += '1';
}
no you can do whaterver you want with value of that opinion, here is the whole code with both simple array of opinions and objects http://jsfiddle.net/Lvc0u55v/9513/
if I'm understand your question, you can try this
var autoDrops = angular.module('autoDrops', []);
autoDrops.controller('DropsController', function($scope) {
$scope.usersOpinion = [];
$scope.datas = [{
"name": "item01"
}, {
"name": "item02"
}, {
"name": "item03"
}, {
"name": "item04"
}, {
"name": "item05"
}, {
"name": "item06"
}];
$scope.datas1 = [{
"name": "item11"
}, {
"name": "item12"
}, {
"name": "item13"
}, {
"name": "item14"
}, {
"name": "item15"
}, {
"name": "item16"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="autoDrops" ng-controller="DropsController">
<button ng-click="usersOpinion = datas">
data
</button>
<button ng-click="usersOpinion = datas1">
datas1
</button>
<div>
<div ng-repeat="elem in usersOpinion">
{{elem}}
</div>
</div>
</div>
I'm starting to learn AngularJS now and I have some issues with filters.
I need to apply two types of filters and I can't figure out how.
I have a device list JSON that looks like this:
[{
"ID": 1,
"Name": "Device 1",
"Price": 1998.92,
"Colors": [{
"ColorCode": "Red",
"ColorName": "#FF0000"
},
{
"ColorCode": "Green",
"ColorName": "#2EFE2E"
}],
"Type": {
"TypeID": 1,
"TypeName": "Mobile device"
},
"Company": {
"CompanyID": 1,
"CompanyName": "Alcatel"
}
}]
I display the list like this:
<div ng-repeat="device in devices | filter:companyFilters | filter:colorFilters">
<span>{{device.Company.CompanyID}}</span> // 1
<span>{{device.Company.CompanyName}}</span> // Google
<span>{{device.Name}}</span> // Nexus 6P
</div>
I have some filters that I applied but there are two filters that I can't understand how to apply.
Filter 1:
A checkbox list of companies that filters the items by the selected
companies.
Filter 2:
A color filter that when clicking on a color will filter the devices
that has that color
For the company filter I have this checkbox list:
<div ng-repeat="company in deviceCompanies">
<input type="checkbox" data-ng-model="companyFilters" id="{{company.CompanyID}}" data-ng-true-value='{{company.CompanyID}}' data-ng-false-value='' />
<label for="{{company.CompanyID}}">{{company.CompanyName}}</label>
</div>
And on the controller side I have this:
$scope.companyFilters = [];
For the color filter I have this:
<div>
<a ng-click="???">All</a>
<div ng-repeat="color in deviceColors" style="display:inline-block; margin-right:10px;">
<div style="width:20px;height:20px;background-color:{{color.ColorCode}}"></div>
<a ng-model="selColor" data-ng="color.ColorCode" ng-click="colorFilters">{{color.ColorName}}</a>
</div>
</div>
And on the controller:
$scope.colorFilters = function (device) {
if (!$scope.selColor)
return true;
for (var i = 0; i < device.Colors.length; i++) {
if (device.Colors[i].ColorCode == $scope.selColor)
return true;
}
return false;
};
But it doesn't work...
Can anyone please tell me how to apply these filters ?
Since you are using ng-repeat which creates its own scope, anything you do in ng-repeat will not get recognized on the controller scope. Using a tool like ng-inspector or batarang will illustrate this.
I recommend using controllerAs Syntax, in your controller add.
angular.module('myModule').controller('CustomFilterController', function() {
var vm = this;
this.devices = //your list of data
this.companyFilters = [];
this.colorFilters = //your function
}
On your view declare your controller like this:
<div ng-controller='CustomFilterController as custom'>
(Note the value after as can be whatever you want it to be)
Then reference anything on that controller as custom.ThingOnController
EX:
<div ng-repeat="device in custom.devices | filter:custom.companyFilters | filter:custom.colorFilters">
After trying some workarounds, this is what I came up with:
<div ng-repeat="company in deviceCompanies">
<!--the ng-click will call a function that updated an array of values-->
<input type="checkbox" id="{{company.CompanyID}}" ng-click="selectCompany(company.CompanyID)">
<label for="{{company.CompanyID}}">{{company.CompanyName}}</label>
</div>
And the controller part is so simple:
$scope.selectedCompanies = [];
//when the array is upted the filter function will also launch
$scope.selectCompany = function (companyId) {
var i = $.inArray(companyId, $scope.selectedCompanies);
if (i > -1) {
$scope.selectedCompanies.splice(i, 1);
} else {
$scope.selectedCompanies.push(companyId);
}
}
$scope.companyFilter = function (device) {
if ($scope.selectedCompanies.length > 0) {
if ($.inArray(device.Company.CompanyID, $scope.selectedCompanies) < 0)
return;
}
return device;
}
Same goes to the colors filter:
<div>
<a ng-click="selectColor()">All</a>
<div ng-repeat="color in deviceColors" style="display:inline-block; margin-right:10px;">
<div style="width:20px;height:20px;background-color:{{color.ColorCode}}"></div>
<a ng-click="selectColor(color.ColorCode)">{{color.ColorName}}</a>
</div>
</div>
And controller part:
$scope.selectedColor;
$scope.selectColor = function (colorCode) {
$scope.selectedColor = colorCode;
}
$scope.colorFilters = function (device) {
if (!$scope.selectedColor)
return true;
for (var i = 0; i < device.Colors.length; i++) {
if (device.Colors[i].ColorCode == $scope.selectedColor)
return true;
}
return false;
};
And finally, applying the filters:
<div ng-repeat="device in devices | filter:companyFilter | filter:colorFilters">
...
</div>
You can have a look here to see how it works
I think the color filter can be more elegant, but, for now, this does the trick.
If I'll come up with a better solution I'll post it here.
I'm passing an array of objects that looks like this:
"articles": [
{
"_id": "1234",
"type": "location",
"content": {}
},
{
"_id": "1235",
"type": "event",
"content": {}
}, ...
Then I use a ng-repeat to loop over this array where I filter by event:
<div ng-if="articles.type == event && articles.length > 0">
<h3>Events</h3>
<ul>
<li ng-repeat="article in articles | filter: { type: 'event'} track by $index">
<h2>{{article.content.title}}</h2>
<p>{{article.content.intro}}</p>
</li>
</ul>
</div>
<div ng-if="articles.type == location && articles.length > 0">
<h3>Hotspots</h3>
<ul>
<li ng-repeat="article in articles | filter: { type: 'location'} track by $index">
<h2>{{article.content.title}}</h2>
<p>{{article.content.intro}}</p>
</li>
</ul>
</div>
The behaviour I'm trying to achieve is if there are no articles with type event or location than I'm not showing them.
My question is how do I check this in my ng-if because now I'm checking the whole array's length instead of the array's length for that type of article.
Maybe something like this:
$scope.article_type = function(type) {
for (i = 0; i < $scope.articles.length; i += 1) {
if ($scope.articles[i].type === type) {
return true;
}
}
return false;
}
Then in your HTML:
<div ng-show="article_type('event')">
EDIT: Anik's answer is more optimal
Create a method in scope
$scope.isExists=function(type){
var obj = $scope.articles.find(function(x){ return x.type == type ; });
return obj !== null;
}
Then try like this
in html
<div ng-if="isExists('event')">
and
<div ng-if="isExists('location')" >
I have a AngularJS directive that allows users to select a values from a list to filter on. Pretty simple concept which is represented here:
Problem is when I click one of the checkboxes they all select unintended. My directive is pretty simple so I'm not sure why this is happening. The code around the selection and checkboxes is as follows:
$scope.tempFilter = {
id: ObjectId(),
fieldId: $scope.available[0].id,
filterType: 'contains'
};
$scope.toggleCheck = function (id) {
var values = $scope.tempFilter.value;
if (!values || !values.length) {
values = $scope.tempFilter.value = [];
}
var idx = values.indexOf(id);
if (idx === -1) {
values.push(id);
} else {
values.splice(idx, 1);
}
};
$scope.valuesListValues = function (id) {
return $scope.available.find(function (f) {
return f.id === id;
}).values;
};
and the data resembles:
$scope.available = [{
id: 23,
name: 'Store'
values: [
{ id: 124, name: "Kansas" },
{ id: 122, name: "Florida" }, ... ]
}, ... ]
the view logic is as follows:
<ul class="list-box">
<li ng-repeat="val in valuesListValues(tempFilter.fieldId)">
<div class="checkbox">
<label ng-click="toggleCheck(val.id)">
<input ng-checked="tempFilter.value.indexOf(val.id) === -1"
type="checkbox"> {{val.name}}
</label>
</div>
</li>
</ul>
First off, it toggleCheck fires twice but populates the correct data ( second time given my code it removes it though ).
After the second fire, it checks all boxes... Any ideas?
Perhaps its that the local variable doesn't get reassigned to the property of the scope property used in the view. Since your values are then non-existent and not found, the box is checked.
$scope.tempFilter.value = values
I took the interface concept you were after and created a simpler solution. It uses a checked property, found in each item of available[0].values, as the checkbox model. At the top of the list is a button that clears the selected items.
JavaScript:
function DataMock($scope) {
$scope.available = [{
id: 23,
name: 'Store',
values: [{
id: 124,
name: "Kansas"
}, {
id: 122,
name: "Florida"
}]
}];
$scope.clearSelection = function() {
var values = $scope.available[0].values;
for (var i = 0; i < values.length; i++) {
values[i].checked = false;
}
};
}
HTML:
<body ng-controller="DataMock">
<ul class="list-box">
<li>
<button ng-click="clearSelection()">Clear Selection</button>
</li>
<li ng-repeat="val in available[0].values">
<div class="checkbox">
<label>
<input ng-model="val.checked"
type="checkbox" /> {{val.name}}
</label>
</div>
</li>
</ul>
</body>
Demo on Plunker
The repeat that I used to grab the values based on the id, was the problem area.
<li ng-repeat="val in valuesListValues(tempFilter.fieldId)">
removing that and simple listening and setting a static variable resolved the problem.
$scope.$watch('tempFilter.fieldId', function () {
var fId = $scope.tempFilter.fieldId;
if ($scope.isFieldType(fId, 'valuesList')) {
$scope.valuesListValues = $scope.valuesListValues(fId);
}
}, true);
});
and then in the view:
ng-repeat="value in valuesListValues"