Angular JS Cascading Selects with ng-model and ng-options - javascript

So I'm kinda stuck at the 3rc select connected to previous select model.
First is you must select a branch and after that you can select the building name and on what floor.
vm.locations data
[
{
"_id": "5a61acfdd5df1761dd2eb1ef",
"branch": "Lucena City",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"1st",
"2nd",
"3rd"
]
}
],
"dateCreated": "2018-01-19T08:31:57.121Z"
},
{
"_id": "5a61ad6fd5df1761dd2eb1f1",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"ground floor",
"2nd floor",
"3rd floor",
"4th floor",
"5th floor"
]
}
],
"dateCreated": "2018-01-19T08:33:51.761Z"
},
{
"_id": "5a61ada1d5df1761dd2eb1f2",
"branch": "loperz",
"__v": 0,
"building": [
{
"name": "lope",
"floors": [
"ground floor",
"1st floor"
]
}
],
"dateCreated": "2018-01-19T08:34:41.904Z"
}]
html side
<div class="row justify-content-md-center">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" ng-model="vm.locationTest" class="form-control">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="ds as ds for ds in vm.locationTest.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
Selecting a branch works, After that I'm having trouble passing the data to the 2nd and 3rd select. I'm not really good at handling object data.

Looks like you have a typo here:
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
Specifically the vm.locationTest should be vm.locationTest.building and ds.building should be ds.name
So it will then be:
<select ng-options="ds as ds.name for ds in vm.locationTest.building" ng-model="vm.roomData.building" class="form-control">
</select>
Then, we'll also need to fix the 3rd ng-options:
vm.locationTest.floors becomes vm.roomData.building.floors

Related

two <class=form-control"> with ng-repeat

I do have a propblem with my angularjs Code.
I have an object which I want to split into two Groups.
The two objects looks something like
{
"_embedded": {
"aspects": [
{
"name": "KPIs",
"holderAssetId": "123",
"aspectTypeId": "KPIs",
"aspectTypeName": "KPIs",
"category": "dynamic",
"description": "description an. ",
"variables": [
{
"name": "Availability_Minutes",
"dataType": "DOUBLE",
"unit": "min",
"searchable": false,
"length": null,
"qualityCode": true,
"defaultValue": null
},
and 2nd one:
"_embedded": {
"assets": [
{
"assetId": "123",
"tenantId": "aaa",
"name": "GA700",
"etag": 1,
"externalId": "",
Now I want to have two Form-Control. In the first one I can choose aspects.name which will be filtered via ng-repeat out of the object. This works right now.
But The variable x in my ng-repeat is not transferred to my second form-control. Have a look at the code below.
What am I doing wrong?
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_asset_form">Asset</label>
<select class="form-control" id="choose_asset_form" ng-model="selected_assetId">
<option ng-repeat="x in ctrl.assets" ng-value="x.assetId">
{{x.name}}
</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_aspect_form">Aspect for {{x.assetId}}</label>
<select class="form-control" id="choose_aspect_form" ng-model="selected_aspect">
<option ng-repeat="x in ctrl.asset.aspects" ng-value="x.name">
{{x.name}}
</option>
</select>
</div>
</div>
</div>
So I can see assets.name in the first Control, but I can not see aspects.name in the second form-control.

ng-option set default value in Angularjs

I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.
My problem is that I have 3 cascading selects with one model.
default values
vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';
html
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
vm.locations data
[
{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [
{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}
],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}
],
"dateCreated": "2018-01-24T05:34:36.775Z"
}]
try initializing the default values like this,
$scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena');
$scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
$scope.roomData.roomFloor = '3rd Floor' ;
like
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
var vm = this;
vm.roomData = {};
vm.locations = [{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}],
"dateCreated": "2018-01-24T05:34:36.775Z"
}
];
vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
vm.roomData.roomFloor = '3rd Floor' ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
</body>

AngularJS default dropdown select not working

var jsonData ='[
{"type":"product",
"id":1,"label":"Color",
"placeholder":"Select Jean Color",
"description":"",
"defaultValue":"Brown",
"choices":[{
"text":"Denim",
"price":"$0.00",
"isSelected":"false"
},
{
"text":"Black",
"price":"$0.00",
"isSelected":"true"
},
{
"text":"Brown",
"price":"$0.00",
"isSelected":"false"
}],
"conditionalLogic":
{
"actionType":"show",
"logicType":"all",
"checkbox":true,
"rules":[{
"fieldId":2,
"operator":"or",
"value":"Regular"
},
{
"fieldId":3,
"operator":"or",
"value":"Low"
}]
}},
{
"type":"product","id":2,"label":"Color","placeholder":"Select Color","description":"Color Descrioton","defaultValue":"Red","choices":[{"text":"Red","price":"200","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":3,"label":"Select Fit","placeholder":"Select Jean Fit","description":"","defaultValue":"Fit","choices":[{"text":"Regular","price":"$0.00","isSelected":"false"},{"text":"Skinny","price":"$10.00","isSelected":"false"},{"text":"Fit","price":"$5.00","isSelected":"false"}],"conditionalLogic":{"actionType":"show","logicType":"all","checkbox":true}},{"type":"product","id":4,"label":"Select Rise","placeholder":"Select Rise","description":"","defaultValue":"Low","choices":[{"text":"High","price":"$29.00","isSelected":"false"},{"text":"Low","price":"$0.00","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":5,"label":"Size","placeholder":"Select Size","description":"","defaultValue":"Size 36","choices":[{"text":"Size 30","price":"100.00","isSelected":"false"},{"text":"Size 32","price":"100.00","isSelected":"true"},{"text":"Size 34","price":"100.00","isSelected":"true"},{"text":"Size 36","price":"100.00","isSelected":"false"}],"conditionalLogic":""}]';
$scope.attributes = jsonData;
HTML
<div class="col-sm-6" ng-repeat="product_attribute in attributes">
<div class=" form-group">
<label class="font-noraml">{{product_attribute.label}}</label>
<select class="form-control m-b" name="option_choices" ng-selected="option.isSelected=='true'" ng-model="option.price" ng-options="option.price as option.text for option in product_attribute.choices">
<option value="">{{product_attribute.placeholder}}</option>
</select>
</div>
</div>
Above I have posted my JSON and HTML code. I want to show all the attributes choices in my dropdown with default selected value. Please check my HTML I have tried ng-selected="option.isSelected=='true'" to default select my choices options. But that is not working.
Screenshot:
You must have defaultValue as object that comprising all properties.Here is your solution ->
jsfiddle
For example:
"defaultValue": {
"text": "Black",
"price": "$0.00",
"isSelected": "true"
}

Checkbox tag not working properly in Anuglar jS

I'm building a web app which has a form with many different types of questions. Now, I'm suffering with checkbox type of questions.
Here is the view:
<div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'checkbox'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values"><input type="checkbox" id="{{field.id}}" name="field.id" ng-model="formData[field.id]"> {{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
</div>
Here is a JSON I'm rendering:
{
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "checkbox",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [
{
"id": 0,
"title": "Not Selected"
},
{
"id": 1,
"title": "Yes"
},
{
"id": 2,
"title": "No"
}
]
}
When my view is shown, it shows 3 checkboxes with different titles(not selected, yes, no). The problem is that when a user selects one of the boxes, it selects all. And the data being saved to localStorage is only true or false. Is it possible to save as the tile I have in JSON?
First of all, this is a Yes or No question. You cannot select both. So you need to make it Radio button.
Now you can add a value="{{field.id}}" to the input element so that you get to chose what value is stored in the ng-model. And initiate the ng-model at the the parent element of that section of your form using ng-init="formData[field.id]=0". It will make Not selected option ckecked by default.
A demo:
angular.module('theApp', []).controller('theCtrl', function($scope) {
$scope.field = {
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "radio",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [{
"id": 0,
"title": "Not Selected"
}, {
"id": 1,
"title": "Yes"
}, {
"id": 2,
"title": "No"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="theCtrl">
<div ng-init="formData[field.id]=0" class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values">
<input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.id}}">{{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
Selected Value is : {{formData[field.id]}}
</div>
</div>

AngularJS retrieve data and display with ng-change

I have a function to add records to database.
What I need to do is when I select an option all necessary fields must be filled with data.
I'm just new with angularjs and want to learn how to do this.
below is my code.
template
<div class="col-md-10">
<div class="col-md-12">
<div class="form-group">
<label>Select Employee </label>
<select class="form-control" ng-change='getData()' id='empId' ng-model="empId" ng-options="opt.id as opt.value for opt in employees">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Department <i class="required">*</i></label>
<select class="form-control" ng-change ="getPos()" ng-model="data.Employee.departmentId" ng-options="opt.id as opt.value for opt in deparments" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position <i class="required">*</i></label>
<select class="form-control" ng-model="data.Employee.positionId" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Rate <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Employee.rate" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Loan Amount <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Period (months) <i class="required">*</i></label>
<input type='text' class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date Start<i class="required">*</i></label>
<input type="text" class="form-control text-left" id="dateStart" ng-model="data.Employee.contractFrom" data-validation-engine="validate[required]" id="contractFrom">
</div>
</div>
</div>
controller
app.controller('LoanAddController', function($scope, Loan,Select) {
$('#form').validationEngine('attach');
$scope.load = function() {
Loan.get({ id: $scope.employeeId }, function(e) {
$scope.data = e.data;
});
Select.get({ code: 'departments' }, function(e) {
$scope.departments = e.data;
});
// employees selection
Select.get({ code: 'employees' }, function(e) {
$scope.employees = e.data;
});
Select.get({ code: 'positions' }, function(e) {
$scope.positions = e.data;
});
}
$('#dateStart').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
$scope.load();
// save loan data
$scope.save = function() {
valid = $("#form").validationEngine('validate');
if (valid) {
Loan.save($scope.data, function(e) {
if (e.ok) {
$.gritter.add({
title: 'Successful!',
text: e.msg,
});
window.location = '#/loans';
} else {
$.gritter.add({
title: 'Warning!',
text: e.msg,
});
}
});
}
}
});
some JSON data
{
"ok": true,
"data": [
{
"Loan": {
"id": "1",
"employeeId": "9",
"dateApplied": "2015-10-15",
"amount": "5000",
"period": "6",
"startdate": "2015-11-01",
"status": "pending",
"visible": true,
"created": "0000-00-00 00:00:00",
"modified": "0000-00-00 00:00:00"
},
"Employee": {
"id": "9",
"employeeNumber": "24681012",
"lastName": "Cortez",
"firstName": "Kim Carlo",
"middleName": "Mira",
"departmentId": "1",
"positionId": "4",
"rate": "600",
"typeId": "8",
"dateHired": "2015-10-22",
"contractFrom": "2015-10-31",
"contractTo": "2016-10-31",
"image": "9.PNG",
"visible": true,
"created": "2015-10-07 08:25:56",
"modified": "2015-10-07 08:25:56"
},
"Department": {
"id": null,
"code": null,
"name": null,
"description": null,
"visible": null,
"created": null,
"modified": null
},
"Position": {
"id": "9",
"name": "Bell boy",
"departmentId": "6",
"description": "bellboy, ice cream vendor",
"visible": true,
"created": "2015-10-06 13:52:43",
"modified": "2015-10-06 13:52:43"
}
}
],
"paginator": {
"page": 1,
"current": 1,
"count": 1,
"prevPage": false,
"nextPage": false,
"pageCount": 1,
"order": {
"Loan.id": "ASC"
},
"limit": 25,
"options": [
],
"paramType": "named"
}
}
I have to populate the fields for employee details.
Any help would be appreciated.
Thank guys,

Categories