I am building a list control where the user can filter the data. The list control has 4 levels with multiple items. By default the first level item appear only. Once the user clicks the first level, the second is shown and the first is hidden. The user can then click on the second level, in which case the third level will appear and hiding the second one etc..
When I select the first level, then all other first levels need to be hidden as well. Right now when I select the first level then the second appears for all first level items. Once the first level has been selected all other first levels need to be hidden, because the user is going to filter within the first level he selected. In the plunkr below, you will see two departments, if I select "Men", the "Womens" section should be hidden.
The hierarchy is:
Department -> Product Type -> Style -> Color Size Combination
The JSON is already structured in this way:
[
{
"departmentName":"Womens",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001",
"details":[
{
"color":"blue",
"size":"m",
"productNum":1234567891212
},
{
"color":"blue",
"size":"x",
"productNum":1234567891212
},
{
"color":"blue",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"blue",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
},
{
"departmentName":"Men",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001Men",
"details":[
{
"color":"green",
"size":"m",
"productNum":1234567891212
},
{
"color":"green",
"size":"x",
"productNum":1234567891212
},
{
"color":"green",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"green",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
}
]
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='todo'>
<ion-pane>
<ion-content>
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-100">
<span ng-repeat="f in filter">
{{f}} <i class="icon ion-ios-close-empty"></i>
<i class="icon ion-ios-arrow-thin-right" ng-show="$index < (filter.length-1)"></i>
</span>
</div>
</div>
<div class="list" ng-repeat="item in filterData">
<div class="item item-divider" ng-click="setFilter(item.departmentName, 1);" ng-show="showDepartments">
{{item.departmentName}}
</div>
<div ng-repeat="pt in item.productTypes">
<div class="item item-divider" ng-click="setFilter(pt.name, 2);" ng-show="showProductTypes">
{{pt.name}}
</div>
<div ng-repeat="style in pt.styles">
<div class="item item-divider" ng-click="setFilter(style.name, 3);" ng-show="showStyles">
{{style.name}}
</div>
<div ng-repeat="styleLine in style.details">
<div class="item item-divider" ng-click="setFilter(styleLine, 4);" ng-show="showStyleDetails">
{{styleLine.color}} - {{styleLine.size}}
<br/> {{styleLine.productNum}}
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
And the JS:
angular.module('todo', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.filter = [];
$scope.showDepartments = true;
$scope.showProductTypes = false;
$scope.showStyles = false;
$scope.showStyleDetails = false;
$scope.setFilter = function(filterValue, level) {
if (level != 4) {
$scope.filter[$scope.filter.length] = filterValue;
} else {
$scope.filter[$scope.filter.length] = filterValue.color;
$scope.filter[$scope.filter.length] = filterValue.size;
}
if (level == 1) {
$scope.showDepartments = false;
$scope.showProductTypes = true;
}
if (level == 2) {
$scope.showProductTypes = false;
$scope.showStyles = true;
}
if (level == 3) {
$scope.showStyles = false;
$scope.showStyleDetails = true;
}
if (level == 4) {
$scope.showStyleDetails = false;
}
}
$scope.title = 'Ionic';
$scope.filterData = [{
"departmentName": "Womens",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001",
"details": [{
"color": "blue",
"size": "m",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "x",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}, {
"departmentName": "Men",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001Men",
"details": [{
"color": "green",
"size": "m",
"productNum": 1234567891212
}, {
"color": "green",
"size": "x",
"productNum": 1234567891212
}, {
"color": "green",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "green",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}];
})
And finally the plunkr:
http://plnkr.co/6YdnId
I got it working. I have used a property on the item itself to hide the first level for all items except the selected item. I have updated the plunkr. Hope this helps somebody.
You should use a filter factory and aplly to your ng-repeat https://docs.angularjs.org/guide/filter
Related
I am trying to append results of a search of external .json
here i append the results of a search of an internal javascript array. (with a little help from lodash)
$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(fruitChoices, function(object) {
return object.fruit.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + result[i].size + " " + result[i].color + "<br>")
};
});
});
var fruitChoices = [{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}];
#ArrayD {
margin-top:25%;
font-size: 18px;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
!DOCTYPE html>
<html>
<head>
<title>
Apple
</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://aaronlilly.github.io/CDN/js/bootstrap.min.js"></script>
<!-- Lodash -->
<script src="https://aaronlilly.github.io/CDN/js/lodash.min.js"></script>
</head>
<body>
<br>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<input type="text" id="dynamId" size="37" placeholder="Search Field" style="margin-left: 50px;margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-info my-2 my-sm-0" caption="search" id="dynam-now"> Search</button>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div id="ArrayD"> </div>
with my future external .json hosted here - https://aaronlilly.github.io/ApiExample/Apple4/apple4.json
but is written as -
{
"results":
[
{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}
]
}
I would like to append the filtered search results.
I have tried
$(document).ready(function ()
{
$.ajax
({
method: "GET",
url: " https://aaronlilly.github.io/ApiExample/Apple4/apple4.json"
}).done(function(data)
{$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(data, function(object) {
return object.result.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
console.log(results.fruit)
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + results.result[i].size + " " + result[i].color + "<br>")
};
});
});
console.log(data)
});
});
and get errors such as - Cannot read property 'toLowerCase' of undefined
i have tried to correct this, but not having much luck. any help would be appreciated.
I think there is an issue with your filter function. It should be changed to:
let result = _.filter(data.results, function(object) {
// object = { fruit: 'orange', fruitname: 'ora'...}
return object.fruitname.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;
});
Then result will be an array of matching fruits.
I have a data structure like so:
$scope.personalityFields.traveller_type = [
{"id":1,"value":"Rude", "color":"red"},
{"id":2,"value":"Cordial", "color":"yellow"},
{"id":3,"value":"Very Friendly", "color":"green"},
];
And a select box that looks like so:
<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
How do I set the value of the select box to a value based on a response that maps to the "value" field in the attached JSON? Please help !
So if in the response, the traveller_type is field is set to "Rude", I would want the value of "Rude" to be set in the select box.
This what the response looks like:
someObject = {
traveller_type: "Rude"
}
this needs to be displayed on the select box
If you have only value("Rude","Cordial","Friendly") back from response, you have to change ngOptions syntax to be ng-options="item.vaue as item.value for item in personalityFields.traveller_type"(bind item.value to options)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = 'Rude';
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item.vaue as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>
Else you have entire object({"id":1,"value":"Rude", "color":"red"}) back from response, you have to change ngOptions syntax to be ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"(use track by to only compare value property)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item as item.value for item in personalityFields.traveller_type track by item.value">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>
There are a couple of things wrong with your code, below is an example of you can do to achieve your goal:
angular.module('limitToExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.serverResponse = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
traveller_type: [{
"id": 1,
"value": "Rude",
"color": "red"
}, {
"id": 2,
"value": "Cordial",
"color": "yellow"
}, {
"id": 3,
"value": "Very Friendly",
"color": "green"
}],
}
}]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example103-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
</head>
<body ng-app="limitToExample">
<div ng-controller="ExampleController">
<select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">
</select>
</div>
</body>
</html>
This is one way of setting the default value, you can make it dynamic based on the response of your server (guess that is what you want?)
I am only replicating what #Pengyy describes in his answer, so feel free to accept his over mine.
I have one JSON array...
{
"Name" : "ABC",
"rating": [
{
"id": null,
"Percentage": 40
},
{
"id": 0,
"Percentage": 40
},
{
"id": 1,
"Percentage": 20
}
],
"email" : "abc#abc.com"
}
And i want to get only percentage with id 0 and 1 not null(skip)...
I am displaying this array in html with ng-repeat..., and i want to display only percentages with id is equal to 0 and 1 not null (skip).
This should be the ng-repeat for the array structure:
<div
ng-repeat="item in items"
ng-show="item.id != null && item.id == 0 || item.id == 1">
</div>
This is the array only, not the json object, you'll have to loop through that too prior to this.
If you only want to have those in the HTML, which 0 or 1 in the HTML, you can use the following code snippet:
HTML:
<div ng-repeat="rating in object.rating | filter: skipNull">
Angular Controller:
$scope.skipNull = function(item) {
return item.id === 0 || item.id === 1;
}
Here is a JSFiddle.
You are probably better off, if you are using a function like this, which only checks for null and undefined:
$scope.skipNull = function(item) {
return (typeof item.id !== "undefined" && item.id !== null);
}
You can use a custom filter. Like in this answer.
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.data = {
"Name" : "ABC",
"rating": [
{
"id": null,
"Percentage": 40
},
{
"id": 0,
"Percentage": 40
},
{
"id": 1,
"Percentage": 20
}
],
"email" : "abc#abc.com"
};
$scope.noNull = function(item) {
return item.id != null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in data.rating | filter:noNull" ng-bind="item.Percentage"></li>
</ul>
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.results = [{
"Name": "ABC",
"rating": [{
"id": null,
"Percentage": 40
}, {
"id": 0,
"Percentage": 40
}, {
"id": 1,
"Percentage": 20
}],
"email": "abc#abc.com"
}] ;
$scope.resultstobeDisplayed = [];
angular.forEach($scope.results[0].rating, function(val) {
if (val.id != null) {
$scope.resultstobeDisplayed.push(val);
}
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="vale in resultstobeDisplayed">
<h1>{{vale}}</h1>
</div>
</body>
</html>
You can use ng-if
<div ng-repeat="rating in object.rating" ng-if="rating.id != null">
You can create your filter function into the controller like this:
Controller:
$scope.hideNullRatings = function(item) {
return item.id ===0 || item.id === 1;
}
HTML:
ng-repeat='item in items | filter: hideNullRatings'
You have to use ng-if directive. All you have to do is to apply it:
ng-if="item.id!=null"
function TodoCtrl($scope) {
$scope.data={ "Name" : "ABC", "rating": [ { "id": null, "Percentage": 40 }, { "id": 0, "Percentage": 40 }, { "id": 1, "Percentage": 20 } ], "email" : "abc#abc.com" };
}
td{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<table>
<tr>
<th>Id</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="item in data.rating" ng-if="item.id!=null">
<td>{{item.id}}</td>
<td>{{item.Percentage}}</td>
</tr>
</table>
</div>
</div>
I have a view model containg an object that is used to display some checkboxes:
components = {
"ComponentInfos": [
{
"Id": "1abb0ee5-7e44-4e45-92da-150079066e99",
"FriendlyName": "Component1",
"LimitInfos": [
{
"Id": "4b7cd37a-2378-4f4f-921b-e0375d60d19c",
"FriendlyName": "Component1 Full",
},
{
"Id": "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2",
"FriendlyName": "Component1 Light",
}
]
}
I am able to create the checkboxes with FriendlyName as label:
<h4>{{l.FriendlyName}}</h4>
<div>
<div ng-repeat="limitinfo in l.LimitInfos">
<label>
<input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]"
value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
</label>
</div>
</div>
I want to store the selected LimitInfo.Id in an array for each selected checkbox. I was able to store them in an object like this:
settings = {
"ComponentInfos" : {}
};
Result example:
"2e80bedb-4a18-4cc4-bdfd-837ffa130947": true,
"add1edf8-4f11-4178-9c78-d591a6f590e3": true
What I do need is to store the LimitInfo.Idin an array like this:
settings = {
"ComponentInfos" : []
};
Expected result:
"2e80bedb-4a18-4cc4-bdfd-837ffa130947", "add1edf8-4f11-4178-9c78-d591a6f590e3"
I uploaded my code to Plunker.
you can use a ng-click method on the checkbox with a custom controller method to push to that array.
<input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]"
value="{{limitinfo.Id}}" ng-click="toggleSelection(limitinfo.ImpliedLimits)"/>
$scope.toggleSelection = function toggleSelection(item) {
var idx = $scope.vm.settings.ComponentInfos.indexOf(item);
if (idx > -1) {
$scope.vm.settings.ComponentInfos.splice(idx, 1);
}
else {
$scope.vm.settings.ComponentInfos.push(item[0]);
}
};
see this plnkr.
see this answer
One line solution
You can do the following in vanilla JS (ES5 and above, so modern browsers)
var data = {
"a": true,
"b": false,
"c": true,
"d": false,
"e": true,
"f": true
}
var arr = Object.keys(data).filter( key => !!data[key] );
// ['a', 'c', 'e', 'f']
Demo by directive:
var app = angular.module('plunker', []);
app.directive('myCheckbox',function(){
return {
restrict:'EA',
template:'<label>'
+'<input type="checkbox" ng-model="model" ng-change="toggleModel()" /> {{label}}'
+'</label>',
replace: true,
scope:{
label:'#',
value:'#',
output:'='
},
link:function(scope,elements,attrs){
//init checked status
scope.model=scope.output.indexOf(scope.value) > -1;
//binding click replace watch model
scope.toggleModel = function(){
if(scope.model){
scope.output.push(scope.value);
return false;
}
scope.output.splice(scope.output.indexOf(scope.value),1);
}
}
}
});
function MyViewModel()
{
this.components = {
"ComponentInfos": [
{
"Id": "1abb0ee5-7e44-4e45-92da-150079066e99",
"FriendlyName": "Component1",
"LimitInfos": [
{
"Id": "4b7cd37a-2378-4f4f-921b-e0375d60d19c",
"FriendlyName": "Component1 Full",
"ImpliedLimits": [
"ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2"
]
},
{
"Id": "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2",
"FriendlyName": "Component1 Light",
"ImpliedLimits": [
"4f74abce-5da5-4740-bf89-dc47dafe6c5f"
]
},
{
"Id": "4f74abce-5da5-4740-bf89-dc47dafe6c5f",
"FriendlyName": "Component2 User",
"ImpliedLimits": []
}
]
},
{
"Id": "ad95e191-26ee-447a-866a-920695bb3ab6",
"FriendlyName": "Component2",
"LimitInfos": [
{
"Id": "8d13765a-978e-4d12-a1aa-24a1dda2149b",
"FriendlyName": "Component2 Full",
"ImpliedLimits": [
"4f74abce-5da5-4740-bf89-dc47dafe6c5f"
]
},
{
"Id": "2e80bedb-4a18-4cc4-bdfd-837ffa130947",
"FriendlyName": "Component2 Light",
"ImpliedLimits": [
"4f74abce-5da5-4740-bf89-dc47dafe6c5f"
]
},
{
"Id": "add1edf8-4f11-4178-9c78-d591a6f590e3",
"FriendlyName": "Component2 Viewer",
"ImpliedLimits": [
"4f74abce-5da5-4740-bf89-dc47dafe6c5f"
]
}
]
}
]
};
this.settings = {
"ComponentInfos" : ["4b7cd37a-2378-4f4f-921b-e0375d60d19c","2e80bedb-4a18-4cc4-bdfd-837ffa130947"]
};
}
app.controller('MainCtrl', function($scope) {
$scope.vm = new MyViewModel();
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="l in vm.components.ComponentInfos">
<h4>{{l.FriendlyName}}</h4>
<div>
<div ng-repeat="limitinfo in l.LimitInfos">
<my-checkbox label="{{limitinfo.FriendlyName}}" value="{{limitinfo.Id}}" output="vm.settings.ComponentInfos"></my-checkbox>
</div>
</div>
</div>
<hr>
<pre>
{{vm.settings | json }}
</pre>
</body>
</html>
You can use the ng-click and make an update of your list.
I've added this to your MyViewModel function and changed the type of your ComponentInfosto an array.
this.update = function (value) {
var exists = false;
for (var elem of this.settings["ComponentInfos"]){
if (elem === value) {
exists = true;
}
}
if(exists) {
var index = this.settings["ComponentInfos"].indexOf(value);
this.settings["ComponentInfos"].splice(index,1);
} else {
this.settings["ComponentInfos"].push(value);
}
}
Additionally you need to change the input in the html to
<input type="checkbox" ng-click="vm.update(limitinfo.Id)"/> {{limitinfo.FriendlyName}}
I am new to angularJS, Try this :
Add this snippet to app.js
this.data =[];
this.selection = function(){
this.data =[];
angular.forEach(this.settings["ComponentInfos"], function(value, key) {
if(value)
this.push(key);
}, this.data);
}
This to body of index.html
<div ng-repeat="l in vm.components.ComponentInfos">
<h4>{{l.FriendlyName}}</h4>
<div>
<div ng-repeat="limitinfo in l.LimitInfos">
<label>
<input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]" ng-click="vm.selection()"
value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
</label>
</div>
</div>
</div>
<hr>
<pre>
{{vm.settings | json }}
{{vm.data}}
</pre>
HTML Code
<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>
document.write("<base href=\"" + document.location + "\" />");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1> NG options</h1>
<form name="addUser">
Application:
<select ng-model="filterAddUser.application" ng-init ="filterAddUser.application = 'STACK'" title="" ng-options="value as value for (key , value) in applicationStatus">
</select>
Roles:
<select ng-model="filterAddUser.role" title="" ng-init ="filterAddUser.role = 'R'" ng-options="role.value as role.param for role in roleStatus">
</select>
<button ng-click="addToCart()">AddItem</button>
<div class="addCart">
<ul ng-repeat="item in items">
<li><b>Application:</b> {{item.application}}</li>
<li><b>Role:</b> {{item.role}}</li>
<li class="actionOptions">
<button ng-click="toggleSelected($index)">removeItem</button>
</li>
</ul>
</div>
</form>
</body>
</html>
Javascript Code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.applicationStatus = {
"TEST App": "TEST",
"ABC App": "ABC",
"TRY App": "TRY",
"SIR App": "SIR",
"LOPR App": "LOPR",
"STACK App": "STACK"
};
$scope.roleStatus = [{
"param": "Read",
"value": "R"
}, {
"param": "Write",
"value": "W"
}, {
"param": "Admin",
"value": "A"
}, {
"param": "Super Approver",
"value": "SA"
}, {
"param": "Supervisor",
"value": "S"
}];
$scope.addToCart = function() {
$scope.items.push({
application: $scope.filterAddUser.application,
role: $scope.filterAddUser.role
});
// Clear input fields after push
$scope.filterAddUser['application'] = "";
$scope.filterAddUser['role'] = "";
}
$scope.toggleSelected = function(index) {
$scope.items.splice(index, 1);
};
});
All that i am trying to do is when i add the application to the cart that application needs to be removed from the dropdwon and also when i click on the remove item that needs to be pushed back to the cart i have included a plunker as well http://plnkr.co/edit/kSsetX?p=preview
need help on the same.
Updated your plunkr: http://plnkr.co/edit/QQobh7Jx76r7lDzw7TzV
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
var deletedApplication = [];
$scope.applicationStatus = {
"TEST App": "TEST",
"ABC App": "ABC",
"TRY App": "TRY",
"SIR App": "SIR",
"LOPR App": "LOPR",
"STACK App": "STACK"
};
$scope.roleStatus = [{
"param": "Read",
"value": "R"
}, {
"param": "Write",
"value": "W"
}, {
"param": "Admin",
"value": "A"
}, {
"param": "Super Approver",
"value": "SA"
}, {
"param": "Supervisor",
"value": "S"
}];
$scope.filterAddUser = {
application: $scope.applicationStatus[0],
role: $scope.roleStatus[0]
};
$scope.addToCart = function() {
deletedApplication.push([
$scope.filterAddUser.application, $scope.applicationStatus[$scope.filterAddUser.application]
]);
delete $scope.applicationStatus[$scope.filterAddUser.application];
$scope.items.push({
application: $scope.filterAddUser.application,
role: $scope.filterAddUser.role
});
// Clear input fields after push
$scope.filterAddUser['application'] = $scope.applicationStatus[0];
$scope.filterAddUser['role'] = $scope.roleStatus[0];
}
$scope.toggleSelected = function(index) {
var addApp = deletedApplication.filter(function(deletedApp){
return deletedApp[0] === $scope.items[index].application;
})[0];
$scope.applicationStatus[addApp[0]] = addApp[1];
console.log($scope.applicationStatus);
$scope.items.splice(index, 1);
};
});