Using AngularJS I want to show and hide the data related with particular id in the toggle way.
My JSON Data format is like:
$scope.things = [{
id: 1,
data: 'One',
shown: true
}, {
id: 2,
data: 'Two',
shown: false
}, {
id: 3,
data: 'Three',
shown: true
}, ];
What I want is when click on id-1 It will show text One and Hide the others, when click on id-2 will show text Two and hide others and so on.
Here is the fiddle what I tried : jsfiddle : Demo Link
i updated your code
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(id == thing.id){
thing.shown = true;
}
else{
thing.shown = false;
}
})
};
{{thing.id}}
here is the working fiddle
It should work
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(thing.id === id) {
thing.shown = true;
return;
}
thing.shown = false;
})
};
<div ng-repeat="thing in things">
{{thing.id}}
</div>
Forked working solution: http://jsfiddle.net/nypmmkrh/
Change your scope function:
$scope.flipMode = function (id) {
$scope.things.forEach(function(thing) {
if(thing.id == id) {
thing.shown = true;
} else {
thing.shown = false;
}
});
};
And pass the id in the view:
{{thing.id}}
Related
I was working on a project with two drop-downs having grouped options and multiple selection this is the stackblitz represntation. There I was trying to disable the entire group of options selected in one dropdown, when it is selected in another dropdown.But I was facing a problem here.
Here is the JSON:
items = [
{
type: 'all',
name: ['All Pokemon'],
},
{
type: 'water',
name: [
'Squirtle',
'Wartortle',
'Blastoise',
'Psyduck',
'Golduck',
'Tentacool',
'Seel',
],
},
{
type: 'fire',
name: [
'Charmander',
'Charizard',
'Vulpix',
'Arcanine',
'Ponyta',
'Magmar',
'Cyndaquil',
],
},
{
type: 'earth',
name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
},
];
When I select Wartortle from type:water in the 1st dropdown, the whole group of type:water should get disabled in the 2nd dropdown and in the 1st dropdown only the group of type:water should remain enabled..
This is what I was able to do so far:
I made two arrays(for 2 dropdowns):
this.items.forEach((data) => {
data['disable'] = false;
});
this.arr1 = this.items;
this.arr2 = this.items.filter((x) => x.type !== 'all');
This is the logic I am using to disbale it:
if (includeTest.length) {
includeTest.map((x1) => {
this.arr1.forEach((y1) => {
if (y1.name.includes(x1)) {
y1.disable = true;
} else {
y1.disable = false;
}
});
this.arr2.forEach((y2) => {
if (y2.name.includes(x1)) {
y2.disable = true;
} else {
y2.disable = false;
}
});
});
} else {
this.arr1.forEach((x) => {
x.disable = false;
});
this.arr1.forEach((x) => {
x.disable = false;
});
}
Here, includeTest contains array of string based on which,I have to filter out/disable the option groups.
Try to read about Angular Pipes, especially about "filter". There is lot's of resource in here and also in documentation of Angular.
Shortly described, all your 'ngFor' or 'ng-repeat' must be filtered through your filter pipe. When you select something from dropdown 1, the filter on dropdown 2, fill show data filtered based on dropdown 1 value or vice-versa.
if (dropdown1.type == 'water') {dropdown2.items = ...}
or
if (dropdown1.type == 'water' && dropdown1.name == 'Vulpix') {dropdown2.items = ...}
or
<li *ngFor="let item of dropdown2 | callback: filterData">...</li>
filterData(item: Item) {
if (dropdown1.type == 'water' && item == 'your rules') {return item}
}
so the data of dropdown 2 always will be based on dropdown 1
I have a angularjs ng-click function that filters the results of a list based on the searchText when a tab is clicked. However, Why does the function show up in the text box when clicking on one of the tabs and how to I prevent that from showing up? Thank you. The entire code can be seen on at this codepen.
AngularJS generated tabs
<span class="tab-span" ng-repeat="tab in tabs" ng-click="updateTab(tab.value,$event.currentTarget)">{{tab.label}}</span>
updateTab function
$scope.tabs = [
{value: undefined, label: 'All', },
{value: 'Infrastructure', label: 'Infrastructure'},
{value: 'CSI', label: 'CSI'},
{value: 'EnterpriseSIEMContentCreate', label: 'Enterprise SIEM'}
];
$scope.updateTab = function(filterText,element) {
var spans = document.querySelectorAll(".tab-span");
spans.forEach(span => {
span.classList.remove("active-span");
});
element.classList.add("active-span");
if(!filterText){
$scope.searchText = filterText;
} else {
$scope.searchText = function(e) {
return (filterText.indexOf(e.AssignedTo) !== -1);
};
}
};
$scope.defaultSpanView = function() {
var sp = document.querySelectorAll(".tab-span");
console.log(sp);
};
$scope.defaultSpanView();
I'm having the search column with checkbox along with folder names. when I click the checkbox of corresponding folder, it will show their items. As well as when I click on multiple checkbox it will show their corresponding items. But when I uncheck the folder, the corresponding items doesn't remove. So I need the hard reload or refresh when I check or uncheck the checkbox or need to clear the cache for every check or uncheck.
Here is my Code:
Checkbox: Core.component.Checkbox.extend({
click: function () {
var ret=null;
var nav = this.get("controller").get('selectedNavigator');
ret = this._super.apply(this, arguments);
var states=null;
Ember.run.schedule('sync', this, function () {
Ember.run.schedule('render', this, function () {
states = this.get('parentView.itemStates');
var values = Object.keys(states).filter(function (key) {
if(states[key]){
return states[key];}
else{return;}
});
if (values.length === 0) {
Core.Action('core:contentHome', {});
} else {
this.set('parentView.model.values',values);
nav.publish();
}
});
});
return ret;
}
}),
For the Publish:
publish: function () {
var currentResultSet = this.get('resultSet'),
ctl = this.get('controller'),
form = ctl.get('formModel'),
resultSet,
data = form.sleep(2000);
if (Object.keys(data).length === 0) {
Core.view.Menu.create({
anchor: $('*[data-class-name="Core.Tab.Content.Controller.NavigationRefresh"]'),
model: [
Core.model.Menu.Item.create({
label: "Please select something to search.",
icon: 'dialog_warning'
})
]
}).show();
return;
}
resultSet = form.send();
ctl.set('loadState', 'loading');
ctl.set('resultSet', Core.model.BlankResultSet.create({
loadState: 'loading',
tabContext: Ember.get(form, 'resultSet.tabContext')
}));
resultSet.fail(function (err) {
ctl.set('loadState', 'loaded');
console.log(currentResultSet);
ctl.set('resultSet', currentResultSet);
}).always(function () {
ctl.set('loadState', 'loaded');
});
},
I want to show conditional contextMenu Items via jQuery.
For Example :
I have cars in my account. And I wanted to show options on conditions.
If car is of my own then all menu items should be visible to me. And if it is shared with me then only View Menu should to visible to me.
if (type == 'vehicle') {
(function () {
var vehicle_id = node.data.vehicle_id;
var vehicle_status = '';
$.ajax({
url: baseUrl + '/check-vehicle-status/'+vehicle_id,
success: function(data) {
console.log(data);
if(data == 'shared'){
//what should I write here? to show only View option
}
}
});
items = {
"View": {
"label": "View Vehicle",
"action": function action() {
self.viewVehicle(vehicle_id);
}
},
"modify": {
"label": "Edit Vehicle",
"action": function action() {
self.editVehicle(vehicle_id);
}
},
"delete": {
"label": "Delete Vehicle",
"action": function action() {
dialogHandler.showDeleteVehicle(function () {
self.removeVehicle(vehicle_id);
});
}
},
You will have to check the data param in the context menu method like below (provided that the node.data of a tree node will have a value).
Check demo - Fiddle Demo
...
contextmenu: {
items: function (node) {
// remove default context menu items
var tmp = $.jstree.defaults.contextmenu.items();
delete tmp.rename;
delete tmp.remove;
delete tmp.ccp;
delete tmp.create;
for (menuItem in items) {
if( menuItem === 'View' || node.data !== 'shared') {
tmp[ menuItem ] = {
id: menuItem,
label: items[menuItem].label,
action: items[menuItem].action
}
}
}
return tmp;
}
},
I need a filter with an "Apply" button and without autocomplete. I can't do that. Here's my basic code, with autocomplete (I don't want it) and without button (I want this).
I'm using Jade.
search.jade
input(type="text", ng-model="buscador.id", placeholder="Ejemplo: 111")
listmagazines.jade
.col-xlg-25.col-sm-3.col-xs-3.col-xxs-6(ng-repeat="magazine in magazines|filter:buscador")
app.js It has a lot of items, I'll put just three.
var app = angular.module("appBuscador", []);
app.factory("revistas", function(){
return{
"revistasNumeros":[
{
id: 97,
titulo: "Nº97",
img: "pdf97.jpg",
descarga: "",
url: "http://www.mapfre.com/fundacion/html/revistas/gerencia/n097/index.html"
},
{
id: 98,
titulo: "Nº98",
img: "pdf98.jpg",
descarga: "",
url: "http://www.mapfre.com/fundacion/html/revistas/gerencia/n098/index.html"
},
{
id: 99,
titulo: "Nº99",
img: "pdfdefault.jpg",
descarga: "",
url: "http://www.mapfre.com/fundacion/html/revistas/gerencia/n099/index.html"
}
]
}
})
controller.js
app.controller("revistasController", function($scope,revistas){
$scope.magazines = revistas.revistasNumeros;
})
Thank you.
--------------------- SORRY I CAN'T ADD AN ANSWER I'M BANNED
I found the solution:
search.jade (add a button)
input(type="text", ng-model="buscador.id", placeholder="Ejemplo: 111")
a.btn.btn-buscador(href="#", ng-click="applySearchFilter()") Buscar
listmagazines.jade (quit filter: and add the ng-hide)
.col-xlg-25.col-sm-3.col-xs-3.col-xxs-6(ng-repeat="magazine in magazines", ng-hide="magazine.excludedByFilter")
controller.js (add this to your app.controller and change the properties)
app.controller("revistasController", function($scope,revistas){
$scope.magazines = revistas.revistasNumeros;
$scope.applySearchFilter = function() {
var idFilter = $scope.buscador.id;
console.log(idFilter);
var showAll = 0 === idFilter.length;
angular.forEach($scope.magazines, function(magazine) {
var id = magazine.id.toString();
if (showAll) {
magazine.excludedByFilter = false;
} else {
magazine.excludedByFilter = (id.indexOf(idFilter) === -1)
|| (id.indexOf(idFilter) === -1);
}
});
}
})
It works!! :)