Angular ng-show select option child options - javascript

So if I have a selection like:
<div class="form-group">
<label for="beneSelect">Select your benefit</label>
<select class="form-control" id="beneSelect" >
<option ng-repeat="descr in claim.claimBenes"
data-ng-model="claimInfo.providerName">{{ descr.descr }}</option>
</select>
</div>
And below that, if the 'descr' has a sibling property that has data, to ng-show an selection option, how or what is the best way to do this?
So for instance, if the JSON data I am pulling has 9 different properties and in the initial select I am showing like:
"id": "%2fooTA9gmtHE8IJ13CdcAww%3d%3d",
"planTypeId": 1,
"benefitTypeId": 11,
"benefCode": "LHCFSA",
"descr": "Limited Health Care FSA (1/1/2015 - 12/31/2015)",
"askSecIns": false,
"askResidual": false,
"hasFunds": true,
"startDate": "2015-01-01T00:00:00",
"endDate": "2015-12-31T00:00:00",
"expenseTypes": [
{
"id": 56,
"descr": "General Dental Care"
},
{
"id": 52,
"descr": "General Vision Care"
},
{
"id": 57,
"descr": "Orthodontia"
},
{
"id": 58,
"descr": "Preventive Care"
}
],
If the expenseTypes "HAS" data, then another select would show, otherwise, just the one select would show. Actually, I would show a new <div> with HTML in it with another <select>.
Not sure the best way to tackle this in Angular. Suggestions with examples please?
Thanks much.

Can use the length of the expenseTypes array as a boolean
ng-if="claim.expenseTypes.length"

I guess You are looking for this....
maybe it will help you with some ideas....
(function() {
'use strict';
function InputController() {
var secondary = {
A: [1, 2, 3],
B: [3, 4, 5]
},
vm = this;
vm.primary = ['A', 'B'];
vm.selectedPrimary = vm.primary[0];
vm.onPrimaryChange = function() {
vm.secondary = secondary[vm.selectedPrimary];
};
}
angular.module('inputs', [])
.controller('InputCtrl', InputController);
}());
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
<div class="row">
<div class="col-xs-6">
<h3>Primary</h3>
<select class="form-control" ng-model="ctrl.selectedPrimary" ng-options="item for item in ctrl.primary" ng-change="ctrl.onPrimaryChange()"></select>
</div>
<div class="col-xs-6">
<h3>Secondary</h3>
<select class="form-control" ng-model="ctrl.selectedSecondary" ng-options="item for item in ctrl.secondary"></select>
</div>
</div>
</div>

Related

How to select default drop-down option in select list in Angular JS

I have the following select option :
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
I want to set default option MemberClass[0] to select option. I tried the following code but not working.
The JSON data is coming from Webservice...
//To fetch Member Class
$http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
$scope.MemberClass = response.data.list;
$scope.class_name = $scope.MemberClass[0]; // Not working
});
Member class JSON data is :
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview
(Am getting error if I not select any option...)
You can utilize ng-options for this. It is the preferred way most of the times. Like this:
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
Now, since you have $scope.class_name assigned as default value, it will be selected already.
working example
Use ng-init. Try like below.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="Ctrl">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Member Class </label>
<div class="col-md-4">
<select ng-model="class_name"
ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass">
</select>
<p>Selected Value: {{class_name}} <p>
</div>
</div>
<button type="submit" ng-click="alertdata()">Save</button>
<script>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
var MemberClass;
$scope.MemberClass = [{
"sub_class_id": 1,
"sub_class_name": "Primary"
},
{
"sub_class_id": 2,
"sub_class_name": "Secondary "
},
{
"sub_class_id": 3,
"sub_class_name": "Dependent "
},
{
"sub_class_id": 4,
"sub_class_name": "Sub Member"
},
{
"sub_class_id": 5,
"sub_class_name": "None"
}
]
// $scope.class_name = $scope.MemberClass[0];
$scope.alertdata = function() {
$scope.class_name = "{}";
var parameter;
parameter = {
"member": {
"first_name": "first_name",
"role": [{
"role_id": 4
}],
"associated": "associated",
"class0": [JSON.parse($scope.class_name)],
"contect": [{
"intercom": "intercom"
}],
"individualdetails": [{
"gender": "gender"
}]
},
"address": [{
"street_address_1": "street_address_1"
}]
}
console.log(JSON.stringify(parameter));
};
});
</script>
</body>
</html>
You should definitly use ng-options for this
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>

How to toggle ng class by clicking a checkbox button?

Through webservice i used ngrepeat to show the check box.
It contains 10 check box. Check box was produced in div tag not used html input tag.
In Html,
<div ng-repeat="showproduct in showproducts.ProductList.products" class="col-md-3 mobile-two">
<div id="1" class="mSelected">{{showproduct.productName}}
</div>
In controller,
$http({
method : 'POST',
url : '///',
headers : {'Content-Type': 'application/x-www-form-urlencoded'},
data:$.param({
userId:$localStorage.loginUserDet.LoginStatus.user.userId,
sessionId:$localStorage.loginUserDet.LoginStatus.sessionId,
authToken:$localStorage.loginUserDet.LoginStatus.user.authToken
})
})
.success(function(data)
{
alert("success");
$scope.showproducts= data;
console.log($scope.showproducts);
});
JSon, to view the check box list
{
"ProductList": {
"code": 0,
"products": [
{
"productId": 1,
"productName": "Credit Card",
"productStatus": 1
},
{
"productId": 2,
"productName": "Net Banking",
"productStatus": 1
},
{
"productId": 3,
"productName": "Saving Account",
"productStatus": 1
},
{
"productId": 4,
"productName": "Loan",
"productStatus": 1
},
{
"productId": 5,
"productName": "Insurance",
"productStatus": 1
},
{
"productId": 6,
"productName": "Certificate Of Deposit",
"productStatus": 1
},
{
"productId": 7,
"productName": "Prepaid Card",
"productStatus": 1
},
{
"productId": 8,
"productName": "Investment",
"productStatus": 1
},
{
"productId": 9,
"productName": "All Products",
"productStatus": 1
},
{
"productId": 10,
"productName": "Demo",
"productStatus": 1
},
{
"productId": 11,
"productName": "Remittance",
"productStatus": 1
}
],
"uploadStatus": 1
}
}
I need to toggle the ngclass when i click the check obx.
Can anyone please help on this.
So, you want to div behave like toggle, on click you the selectTog() will be called and adds ClassName because of $scope.mSlected varibale will become true in the same way it removes the class
<div id="1" ng-class="(mSelected ? 'ClassName': '')" ng-click="selectTog()">{{showproduct.productName}}</div>
now in controller
$scope.mSelected = false; // setting it false by default
$scope.selectTog = function(){
$scope.mSelected = !$scope.mSelected;
}
What if there is ng-repeat?
remove ng-class from <div> and add class in the function.
<div ng-repeat="x in [1,2,3,4]"
<div id="x" ng-click="selectTog($event)">{{x}}</div>
</div>
now in controller
$scope.selectTog = function(){
$event.target.addClass("ClassName");
}
Do like this:
<div id="1" ng-class="'mSelected': data" ng-click="toggle()">{{showproduct.productName}}</div>
controller:
$scope.data = true;
$scope.toggle = function() {
$scope.data = !$scope.data;
}
When ever you click the div it will toggle the class.
All the best.
In your html:
<div id="1" class="mSelected" ng-click="myFunc($event)">{{showproduct.productName}}
</div>
In your controller:
$scope.myFunc = function(event) {
$(event.target).toggleClass("your_css_class");
}
ng-class evaluates an expression like ng-class="productSaleTrue ? onSale : notOnSale"
<div ng-class="mSelected" ng-click="mSelected = !mSelected">
{{showproduct.productName}}
</div>
This would evaluate to true and add the css class onSale to the element with that ng-class, if the expression would evaluate to false, the other css class notOnSale would be added to the element, in your case the checkbox.
There is a lot of documentation and codepen examples that you can take from! Have a nice day! A link, just for the sake of knowledge: https://appendto.com/2016/03/ng-class-use-cases-action/
A practical example taken from treehouse:
<div ng-controller="mainCtrl" class="list">
<div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos">
<input ng-model="todo.completed" type="checkbox"/>
<label ng-hide="editing" ng-click="helloWorld()">
{{todo.name}}</label>
<input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
<div class="actions">
Edit
Save
delete
</div>
</div>
{{todos}}
</div>

Angular 1.5 nested ng-repeat relation json

I just spent a couple hours to find solution for this issue, but couldn't find any similar problems.
The result should be that materials are linked with colors. I want to display materials and colors and ID of colors in value of ng-option.
View:
<div class="row clearfix">
<div class="col-md-8">
<md-input-container class="md-block">
<label>material</label>
<md-select name="material" ng-model="secondStep.material">
<md-optgroup label="material">
<md-option ng-value="materialsObjs.id" ng-repeat="materialsObjs in materialsObj track by $index">{{materialsObjs.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8">
<md-input-container class="md-block">
<label>colors</label>
<md-select name="colors" ng-model="secondStep.colors">
<md-optgroup label="colors">
<md-option ng-value="{{key}}" ng-repeat="(key , value) in colorsObj">{{value}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
JSON:
{
"status": "ok",
"printer_id": 113,
"materials": [{
"id": 1,
"name": "drewno",
"color": [{
"1": "green"
}]
}, {
"id": 2,
"name": "pla",
"color": [{
"3": "yellow"
}]
}]
}
Controller:
if(respondeObj.status == 'ok') {
$scope.materialsObj = respondeObj.materials;
$scope.colorsObj = [];
angular.forEach(respondeObj.materials, function(value , key) {
var putish = value.color[0];
this.push(putish);
}, $scope.colorsObj);
}
I just cant get separated color value for list and color ID to pass as selector value.
Current results is in the image: Image
Here is a working solution based on my comment.
EDIT - I forgot about the ng-optons attribute that allows you to use an object as the selected value for an option. By changing your first select to use ng-options, all you need to add is the keysFilter and use the code for the second dropdown in my HTML section to get the key/value from material.color
HTML
<select ng-model="currentMaterial"
ng-options="material as material.name for material in materialsObj"></select>
<select ng-if="currentMaterial">
<option ng-repeat="color in currentMaterial.color" value="{{id}}" ng-init="id = (color | keysFilter)">{{color[id]}}</option>
</select>
AngularJS Controller
var app = angular.module("myApp", [])
.filter("keysFilter", function () {
return (function (item){
if (!item) {
return [];
}
var keys = Object.keys(item);
return keys[0];
});
})
.controller("myCtrl", function ($scope){
$scope.currentMaterial = {};
$scope.materialsObj = [
{
"id": 1,
"name": "drewno",
"color": [
{
"1": "green"
},
{
"2": "yellow"
}
]
},
{
"id": 2,
"name": "pla",
"color": [
{
"3": "yellow"
},
{
"4": "purple"
},
{
"5": "brown"
}
]
}
];
});
If I understood correctly your problem is because after you construct $scope.colorsObj array you will have objects in it:
$scope.colorsObj = [
{"1": "green"},
{"3": "yellow"}
];
and then you would need to have another ng-repeat to achieve what you want, like:
<div ng-repeat="obj in colorsObj">
<div ng-repeat="(key, value) in obj">
{{key}} : {{value}}
</div>
</div>
Let me know if it helped. Thanks!

Fetching information from nested JSON based on unique fields using AngularJS

I have a json as following.
{
"id":14,
"discussion":8,
"parent":0,
"userid":2,
"subject":"communication skill discussion 2",
"message":"<p>hi all to communication discussion 2 </p>",
"children":[
24,
16,
15
]
},
{
"id":15,
"discussion":8,
"parent":14,
"userid":2,
"subject":"Re: communication skill discussion 2",
"message":"<p>hiiiiiiiiii</p>",
"children":[
25,
23
],
},
{
"id":23,
"discussion":8,
"parent":15,
"userid":2,
"created":1461562317,
"modified":1461562317,
"mailed":0,
"subject":"Re: communication skill discussion 2",
"message":"<p>helloooo</p>",
"children":[
],
}
I want first fetch the details whose Ids matches with the elments in children array
such as for id:14 there are 3 children 24,16,15.Then the control should go directly to id:15 and fetch details of id:15.Again id has children eg. consider id:23 which has no children and will directly print the message.
Please guide me how will I achieve this using ng-repeat of angular ?
Refer to the demo.
Please find the code below:
HTML:
<div ng-app="app" ng-controller="test">
<div ng-repeat="(key,value) in data">
{{key + 1}}) --
<span ng-if="value.children.length > 0">
{{value.children}}
</span>
<span ng-if="!(value.children.length > 0)">
No children found!!
</span>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.data = [{
"id": 14,
"discussion": 8,
"parent": 0,
"userid": 2,
"subject": "communication skill discussion 2",
"message": "<p>hi all to communication discussion 2 </p>",
"children": [
24,
16,
15
]
}, {
"id": 15,
"discussion": 8,
"parent": 14,
"userid": 2,
"subject": "Re: communication skill discussion 2",
"message": "<p>hiiiiiiiiii</p>",
"children": [
25,
23
],
}, {
"id": 23,
"discussion": 8,
"parent": 15,
"userid": 2,
"created": 1461562317,
"modified": 1461562317,
"mailed": 0,
"subject": "Re: communication skill discussion 2",
"message": "<p>helloooo</p>",
"children": [
],
}];
});
UPDATE: As per the request
Demo
HTML:
<div ng-app="app" ng-controller="test">
<div ng-repeat="(key,value) in data">
[{{key + 1}}] --
<div ng-if="value.children.length > 0">
<div ng-repeat="item in value.children">
<span>{{item}}</span> <span class="green" ng-bind-html="getMessage(item)"></span>
</div>
</div>
<span ng-if="!(value.children.length > 0)">
No children found!!
</span>
<br />
</div>
</div>
JS:
$scope.getMessage = function(itemId) {
var flag = true;
var msg;
angular.forEach($scope.data, function(value, key) {
if (flag && value.id == itemId) {
flag = false;
msg = value.message;
}
});
return $sce.trustAsHtml(msg);
}
CSS:
.green {
color: green;
}
Use ng-repeat to display the records.
<ul ng:controller="Cntl">
<li ng:repeat="item in data">
{{item.subject}}: Parent
<ul>
<li ng:repeat="child in item.children">{{child}} : Children
</li>
</ul>
</li>
This is one of the way to display in html. Based on your page design ng-repeat will change.
You can use lodash or underscore _.where:
<div ng:controller="Cntl">
<div ng:repeat="item in data">
{{item.subject}}<br/>
Children
<div ng:repeat="child in item.children">{{_.where(data, {id:child});}}
</div>
</div>
First you need to restructure your json into a tree structure. May be you want to have a look at this post. Then you have to recursively add templates

Angular ngRepeat multiple select fields without displaying already selected data through ng-options

So the overview of the problem; I am retrieving data from an api and creating a CRUD page for it. The data has a set of labels that the user can select.
Below is a code sample representing my problem. The labels selected by the user are represented by the user.labels relationship and the total available labels that can be selected are represented by user.parent.grandparent.labels.
I'm able to sync the selection. What I can't seem to figure out is how to get rid of options that have already been selected from the list of options on any other subsequent select field.
angular.module('app', [])
.controller('select', ['$scope', '$filter', '$location',
function($scope, $filter, $location) {
$scope.user = {
"parent": {
"grandparent": {
"labels": [{
"id": 28,
"name": "Label 1",
}, {
"id": 17,
"name": "Label 2",
}, {
"id": 39,
"name": "Label 3",
}, {
"id": 77,
"name": "Label 4"
}, {
"id": 100,
"name": "Label 5"
}]
}
},
"labels": [{
"id": 28,
"name": "Label 1",
"meta": {
"score": 3
}
}, {
"id": 17,
"name": "Label 2",
"meta": {
"score": 5
}
}]
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<div ng-repeat="label in user.labels track by $index">
<div class="form-field">
<span>Label</span>
<select ng-model="user.labels[$index]" ng-options="department.name for department
in user.parent.grandparent.labels track by department.id">
</select>
</div>
<div>
<span>Score</span>
<select ng-model="label.meta.score">
<option value="1">1 (lowest)</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5 (highest)</option>
</select>
</div>
</div>
<button ng-click="user.labels.push({})">Add Label</button>
</div>
You can use a filter function inside the ng-repeat to achieve this, here is a sample Codepen showing you how:
http://codepen.io/anon/pen/ZYveOo
You need to pass the filter in the repeat definition:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | filter:removeSelected track by department.id ">
Which refers to this function on scope:
$scope.removeSelected = function(val){
return !_.find($scope.user.labels, function(label) {
return label.id === val.id;
});
};
Even then though I think you are missing one use case which is that you want to be able to have the currently selected label included in the options, by removing all selected options you are removing that ability.
Updated:
Ok then, so after giving this some thought I have come up with the following filter which could be optimised but does seem to work as expected:
.filter('duplicatesFilter', function() {
return function(items, index, selected) {
var res = [selected[index]];
_.forEach(items, function(item){
if(!_.find(selected, function(label) {
return label.id === item.id;
})){
res.push(item);
}
});
return res;
};
})
Use it like so:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | duplicatesFilter:$index:user.labels track by department.id "></select>
This is something I have hit a few times and each time I've worked around it. I'll take a look later if I can find a custom filter that better solves the problem and if I can't I'll tidy up this code and release one; however this should be good to go for your use-case.
Working code-pen:
http://codepen.io/anon/pen/ZYveOo

Categories

Resources