In the below code, i'm getting environments from localStorage which i had stored earlier and assigning it to $scope.environments. When the accessMethod is "A" then it should show button and when accessMethod is "B" it should show a dropdown.
<form accept-charset="UTF-8" role="form" name="loginForm" ng-controller="PostsCtrl" novalidate ng-submit="Onsubmit()" >
<fieldset>
<ul class="heroes" ng-repeat="environment in environments track by $index" >
<li ng-if="environment.accessMethod === 'A'">
<button type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
<span class="badge">{{environment.code}}</span>
</button>
</li>
<li ng-if="environment.accessMethod === 'B'">
<div class="btn-group" uib-dropdown >
<button type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
<span class="badge">{{environment.code}}</span> <span class="caret"></span><span class="sr-only"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" >
<li ng-repeat="roledetail in environment.roles"
ng-click="onSelect(roledetail.roleName)" >
<a href="" >{{roledetail.roleName}}</a>
</li>
</ul>
</div>
</li>
</ul>
</fieldset>
</form>
$scope.environments = localStorage.getItem("environments");
I kept the Json for understanding but i'm accessing it through localStorage.
$scope.environments = [{
"code": "abc",
"name": null,
"accessMethod": "A",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}, {
"code": "XYZ",
"name": null,
"accessMethod": "A",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}, {
"code": "Neo",
"name": null,
"accessMethod": "B",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "C"
}
]
}, {
"code": "LAB",
"name": null,
"accessMethod": "B",
"roles": [{
"roleId": 1,
"roleName": "A"
},
{
"roleId": 3,
"roleName": "B"
}
]
}]
You are not doing Json.parse when assigning to your scope.
Do this
$scope.environments = JSON.parse(localStorage.getItem("environments"));
Use ng-show instead of if. ng-show changes the visibility of an element on the fly whereas ng-if decides whether that element should even be rendered or not.
Related
I have a radio button initially in the page which is saving selected item details with value as name.
<div data-bind="foreach: {data:customer ,as:'customerData'}, visible: customer().length > 0">
<label class="btn btn-primary active">
<input type="radio" name="optionsGroup" data-bind="attr: {value:name}, checked: $root.selected">
<span data-bind="text: customer.type"></span>
</label>
</div>
Then in the later page I want to show customer details of the selected item.
I am trying to do like below but I am not getting the desired results and all the objects in customer gets printed instead of selected one.
<div data-bind="foreach: {data:customer,as:'customerData'}, visible: customer().length > 0">
<div data-bind:"if:$root.selected() === customer.name">
<p data-bind="text:customer.name" class="w3-center"></p>
<p data-bind="text:customer.college" class="w3-center"></p>
<p data-bind="text:customer.school" class="w3-center"></p>
</div>
I tried to make a foreach with if condition but that does'nt solve the problem as i stated earlier in the post also the json file looks like this:
"customer": [{
"order": "01",
"name": "custom 1",
"type": "A1",
"school": "ABCDS",
"College": "university of florida"
},
{
"order": "02",
"name": "custom 2",
"type": "A2",
"school": "ABCDS",
"College": "university of new york"
}
]
I'm building a form of radio question types.
Here is code for view:
<div 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.title}}"> {{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>
JSON data I'm feeding is
{
"groups": [
{
"id": "4_2",
"title": "Passport",
"sections": [
{
"id": "4_2_section",
"fields": [
{
"id": "select_id",
"title": "Select type of question",
"type": "select",
"info": "Always select \"Yes\"",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [
{
"id": 0,
"title": "Not Selected"
},
{
"id": 1,
"title": "Yes"
},
{
"id": 2,
"title": "No"
}
]
}
]
The result I get for the radio questions is like following:
As you can see, all radio buttons are aligned horizontally.
How do I align them vertically?? I mean one radio button on one row.
Add a style to your HTML
.display-block {
display: block;
}
<label class="display-block" ng-repeat="value in field.values">
<input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.title}}"> {{value.title}}
</label>
Watch what you want to repeat.
<ul>
<li ng-repeat="value in field.values">
<label for="{{field.id}}"> {{value.title}}</label>
<input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.title}}">
</li>
</ul>
Wrap your inputs in ul, li. Below code will help for sure :
HTML:
<form name="myForm" ng-controller="MyCtrl">
<p>Favorite Beatle</p>
<ul>
<li ng-repeat="person in people">
<label>{{person.name}}
<input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />
</label>
</li>
</ul>
<p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
<button ng-disabled="myForm.$invalid">Submit</button>
</form>
JavaScript :
function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
}
JsFiddle : https://jsfiddle.net/nikdtu/zp2131zw/
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>
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,
In controller I have written code that convert rank into Float
details.rank = '';
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
if (predicate == 'rank') {
for (var i = 0; i < data.countries[$scope.index].cities.length; i++) {
details.rank = parseFloat(data.countries[$scope.index].cities[i].rank);
}
$scope.predicate = predicate;
} else $scope.predicate = predicate;
};
but here I am getting error that ReferenceError: details is not defined
I have json like this:
{
"countries": [{
"country": "India",
"cities": [{
"name": "Bangalore",
"rank": "40"
}, {
"name": "Kolkata",
"rank": "54"
}, {
"name": "Mumbai",
"rank": "32"
}, {
"name": "Chennai",
"rank": "42"
}]
}, {
"country": "China",
"cities": [{
"name": "Guangzhou",
"rank": "111"
}, {
"name": "Beijing",
"rank": "90"
}, {
"name": "Fuzhou",
"rank": "21"
}, {
"name": "Baotou",
"rank": "23"
}]
}]
}
In html if I click header of table then it will sort the table both ascending and descending order but I am unable to do this.
<th>
RANK
<span ng-show="predicate === 'rank'" ng-class="{reverse:reverse}"> </span>
</th>
<ul ng-repeat="city in countryType">
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1"> {{details.name}} </div>
<div class="text" id="t2"> {{details.rank}}</div>
<div class="text" id="t3"> {{details.population}} </div>
<div class="text" id="t4"> {{details.language}}</div>
</li>
</ul>
You can make a dynamic sorting by clicking on the header divs doing like that :
<ul ng-repeat="city in countryType">
<li>
<div class="text" ng-click="orderListBy('name')"> Name </div>
<div class="text" ng-click="orderListBy('rank')"> Rank</div>
<div class="text" ng-click="orderListBy('population')"> Population </div>
<div class="text" ng-click="orderListBy('language')"> Language</div>
</li>
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1-{{$index}}"> {{details.name}} </div>
<div class="text" id="t2-{{$index}}"> {{details.rank}}</div>
<div class="text" id="t3-{{$index}}"> {{details.population}} </div>
<div class="text" id="t4-{{$index}}"> {{details.language}}</div>
</li>
</ul>
And in your controller
//initialize values
$scope.predicate = 'rank';
$scope.reverse = false;
$scope.orderListBy = function(attr){
$scope.predicate = attr;
$scope.reverse = !$scope.reverse;
};
Doing so it will revert the sort when re-clicking on the header of a column.
PS : don't forget to dynamically name your IDs in the ng-repeat directive to avoid errors and have a valid HTML code.