Why is my select box option not getting selected on load?
As you can see from the script below there is already a class_id there in the "ng-model" of the select box still it doesn't gets that value selected in the option with the class_id present in the option.
Upon select box change the "ng-model" gets updated and the model also gets updated with the class_id of the option.
Need to set select box option to the pre selected class_id of the option.
Fiddle for the same is here
angular
.module("app", [])
.controller("test", function($scope) {
$scope.cartData = {
order: [{
class_id: 1,
price: 121
}, {
class_id: 2,
price: 11
}],
selectedSection: {
classes: [{
class_id: 1,
name: "adsad"
}, {
class_id: 2,
name: "2222"
}]
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<ul class="bxslider" ng-controller="test">{{test}}
<li class="mbm" ng-repeat="seat in cartData.order">
<div class="box">
<div class="select-style">
Selected id: {{seat.class_id}}
<select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes track by type.class_id" ng-model="seat.class_id">
<!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
</select>
</div>
<div class="price-sec">
<span class="price">Price: {{seat.price}}</span>
</div>
</div>
</li>
</ul>
</div>
Remove the track by type.class_id from ng-options.As the angular doc says
Using select as will bind the result of the select expression to the
model, but the value of the and html elements will
be either the index (for array data sources) or property name (for
object data sources) of the value within the collection. If a track by
expression is used, the result of that expression will be set as the
value of the option and select elements.
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];
but this will not work:
<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;
In both examples, the track by expression is applied successfully to
each item in the items array. Because the selected option has been set
programmatically in the controller, the track by expression is also
applied to the ngModel value. In the first example, the ngModel value
is items[0] and the track by expression evaluates to items[0].id with
no issue. In the second example, the ngModel value is items[0].subItem
and the track by expression evaluates to items[0].subItem.id (which is
undefined). As a result, the model value is not matched against any
and the appears as having no selected value.
angular
.module("app", [])
.controller("test", function($scope) {
$scope.cartData = {
order: [{
class_id: 1,
price: 121
}, {
class_id: 2,
price: 11
}],
selectedSection: {
classes: [{
class_id: 1,
name: "adsad"
}, {
class_id: 2,
name: "2222"
}]
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<ul class="bxslider" ng-controller="test">{{test}}
<li class="mbm" ng-repeat="seat in cartData.order">
<div class="box">
<div class="select-style">
Selected id: {{seat.class_id}}
<select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes " ng-model="seat.class_id">
<!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
</select>
</div>
<div class="price-sec">
<span class="price">Price: {{seat.price}}</span>
</div>
</div>
</li>
</ul>
</div>
Related
I am trying to add my array of object to map the primeng checkbox and would like to get the values for selected check boxes.
I have tried FormControlName but it it's throwing undefined after submitting.
below is the rough code
data = [
{ type: dropdown
text: 'drop',
num: 1.23,
options: [
{
value=1,
text= 'drop1
},{
value=2,
text= 'drop2
}
]
},
{ type: checkbox
text: 'check',
num: 1.23,
options: [
{
value=1,
text= 'check1
},{
value=2,
text= 'check2
}
]
},
{ type: radio
text: 'radio',
num: 1.23,
options: [
{
value=1,
text= 'radio1
},{
value=2,
text= 'radio2
}
]
},
];
Template:
<form [formGroup]="group">
<div *ngFor="let d of data">
<div *ngSwitchCase = "checkbox">
<p-checkbox *ngFor="let check of options" [value]="check.value" [formControlName]="check.text"></p-checkbox>
</div>
<div *ngSwitchCase = "dropdown">
<p-dropdown *ngFor="let drop of options" [value]="drop.value" [formControlName]="d.text"> {{drop.text}}
</p-dropdown>
</div>
<div *ngSwitchCase = "radio">
<p-radioButton *ngFor="let radio of options"[value]="radio.value" [formControlName]="d.text"></p-radioButton >
</div>
</div>
</form>
How I can get the reference of my control and values the same for drop down and check boxes.
How to get the values for dynamic forms?
for reactive dynamic form first thing we have to generate the formGroup base of the form control data
getFormGroup method will return a formGroup object by loop over the data and create a form controls with name base of the text value .
getFormGroup() {
const formControls = this.data.reduce( (controls , f:FormControl)=>{
controls[f.text] = this.formBuilder.control(null);
return controls;
},{});
return this.formBuilder.group(formControls)
}
after we generate the form now we can render the form controls on the template
<form [formGroup]="form">
<div *ngFor="let d of data">
<ng-container [ngSwitch]="d.type">
<label for="">{{d.text}}</label>
<div *ngSwitchCase="'checkbox'">
<p-checkbox *ngFor="let check of d.options" [label]="check.label" [value]="check.value"
[formControlName]="d.text"></p-checkbox>
</div>
<div *ngSwitchCase="'dropdown'">
<p-dropdown [options]="d.options" [formControlName]="d.text">
</p-dropdown>
</div>
<div *ngSwitchCase="'radio'">
<p-radioButton *ngFor="let radio of d.options" [name]="d.text" [label]="radio.label"
[value]="radio.value" [formControlName]="d.text">
</p-radioButton>
</div>
</ng-container>
</div>
</form>
stackblitz demo 🚀
I have a dropdown and few divs,once you change the dropdown, divs will create based on json and selection.Here every thing is fine here,but I need to get count of childs(here p tags ) of each parent(here div tags ) ,here once you select technology,you can see there are 2 childs under python so it should be 2 just beside python..so on.Here is the code and updated plunker.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="technology">technology</option>
<option value="vertical">vertical</option>
</select>
<div ng-repeat="(key, value) in players | groupBy: attr" ng-attr-id="{{key}}">
<h4>Group name: {{ key }}</h4>
<p ng-repeat="player in value">
player: {{ player.name }}
</p>
</div>
</div>
script.js
var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.players = [
{
name: 'projectjava',
symptom:'fever',
technology:'java',
vertical:'insurance',
id:'1'
},
{
name: 'projecttabulue',
symptom:'diesease',
technology:'tabulue',
vertical:'Banking',
id:'3'
},
{
name: 'projectpython1',
symptom:'diesease',
technology:'python',
vertical:'Health care',
id:'3'
},
{
name: 'projectpython2',
symptom:'colds',
technology:'python',
vertical:'Banking',
id:'2'
}
];
$scope.update = function() {
if($scope.x == 'technology'){
$scope.id='technology';
$scope.attr = 'technology';
}
if($scope.x == 'vertical'){
$scope.id='vertical';
$scope.attr = 'vertical';
}
}
});
You can use value.length to display the count of the elements.
like this,
<h4>Group name: {{ key }} {{value.length}}</h4>
Here is the demo
I have a dropdown and few divs,once you change the dropdown, divs will create based on json and selection.Here every thing is fine.But once I select any option,I want to sort the divs on ascending order on click of first button, again I want to sort the divs on descending order on click of second button based on h4 tag's value.Here is the code and updated plunker. https://plnkr.co/edit/XEzYi1JEeOtvqC6xn9jZ?p=preview
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="technology">technology</option>
<option value="vertical">vertical</option>
</select>
<div><button>Sort-ascending alphabetical order</button></div>
<div><button>Sort-descending alphabetical order</button></div>
<div ng-repeat="(key, value) in players | groupBy: attr" ng-attr-id="{{key}}">
<h4>Group name: {{ key }}{{value.length}}</h4>
<p ng-repeat="player in value">
player: {{ player.name }}
</p>
</div>
</div>
script.js
var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.players = [
{
name: 'projectjava',
symptom:'fever',
technology:'java',
vertical:'insurance',
id:'1'
},
{
name: 'projecttabulue',
symptom:'diesease',
technology:'tabulue',
vertical:'Banking',
id:'3'
},
{
name: 'projectpython1',
symptom:'diesease',
technology:'python',
vertical:'Health care',
id:'3'
},
{
name: 'projectpython2',
symptom:'colds',
technology:'python',
vertical:'Banking',
id:'2'
}
];
$scope.update = function() {
if($scope.x == 'technology'){
$scope.id='technology';
$scope.attr = 'technology';
}
if($scope.x == 'vertical'){
$scope.id='vertical';
$scope.attr = 'vertical';
}
}
});
To sort by ascending/descending order, you can use orderBy property in ng-repeat.
Reference Docs
Thanks
exampleDEMO
You can see code above link.
Actually, I want to according the button group's input to control all of input form which name is the same with button group name.
For example, I put value into input form on the 'First' Button right side,
and the same time, all of the input form which name 'First' should be change
with just button group input one.
Sorry for my poor English skill, hope you can understand it!!
<div ng-app="app" ng-controller="AppCtrl">
// list group
<div>
<ul>
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" ng-model="price">
</li>
</ul>
</div>
// button group
<div>
<ul class="list-btn">
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" ng-model="price_all">
</li>
</ul>
</div>
</div>
angular.module('app', [])
.controller('AppCtrl', ['$scope', function ($scope) {
$scope.items = [
{id: 1, name: 'First'},
{id: 2, name: 'Second'},
{id: 3, name: 'Third'},
{id: 4, name: 'First'},
{id: 5, name: 'Second'},
{id: 6, name: 'Third'},
{id: 7, name: 'First'},
{id: 8, name: 'Second'},
{id: 9, name: 'Third'},
]
$scope.btns = ['First', 'Second', 'Third'];
}])
Since ng-model is repeated insisde li tag, the two-way binding will work only inside that li tag, not outside of it. So, you need to use onkeyup event.
Working solution in the fiddlder - https://jsfiddle.net/fcoLmd2n/
Do these changes in html:
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" class="{{item.name}}" ng-model="price">
</li>
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" btnType="{{btn}}" ng-model="price_all" onkeyup="Update(this);">
</li>
Changes in Js file:
function Update(obj)
{
var className = obj.getAttribute('btnType');
var txtBoxElements = document.getElementsByClassName(className);
for(var i=0;i<txtBoxElements.length;i++)
{
txtBoxElements[i].value= obj.value
}
}
Use Jquery for optimization
Im loading objects into clickable boxes using ng-repeat.
now i want to return the objects title when the user has clicked its item-box
normally i would put it in a ng-model but since im using ng-repeat the model will be reused in every created box...
i am searching for a way to check the selected objects title. and put it in a ng-model for re-use later on.
code now:
creation of object boxes in html:
<div class="row form-group product-chooser">
<a href="#drop">
<div id="catagories" ng-repeat="catagories in main.catagories" class="col-xs-12 col-sm-12 col-md-4 col-lg-4" value="{{catagories.title}}">
<div class="product-chooser-item">
<img src="{{catagories.image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Catagories">
<div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<span class="title">{{catagories.title}}</span>
<span class="description">{{catagories.description}}</span>
<input type="radio" name="product" value="{{catagories.title}}">
</div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<P>selected is: {{main.CreateProject.ProjectCatagorie}}</P>
contoller js file:
// objects
vm.catagories = [
{
id: 1,
title: 'Mobile and Desktop',
description: 'Full concept design to complete App',
image: '../img/Project/desktop_mobile.png'
},
{
id: 2,
title: 'Desktop',
description: 'Blogs, Webshops, complete full back-end Web-Apps',
image: '../img/Project/desktop.png'
},
{
id: 3,
title: 'Mobile',
description: 'Mobile websites, Apps for Android and/or IOS',
image: '../img/Project/mobile.png'
}
];
//javascript to put the checked prop on the checked box:
//works
$(function(){
$('div.product-chooser').find('div.product-chooser-item').on('click', function(){
// remove selected class form all
$(this).parent().parent().find('div.product-chooser-item').removeClass('selected');
// put checked
$(this).addClass('selected');
$(this).find('input[type="radio"]').prop("checked", true);
// get seleciton
if ($('input[type=radio]:checked').length > 0) {
// do something here
alert($('input[type=radio]:checked').val());
}
// set rest disabled
$('div.product-chooser').not('.selected').addClass('disabled');
});
});
vm.CreateProject = function(){
// selected catagorie
//fails
ProjectCatagorie = $('input[type=radio]:checked').val();
// this model is in the function: CreateProject within the maincontroller.
// function doesnt end here...
You can for example add ngClick directive on every checkbox, and set main.CreateProject.ProjectCatagorie directly:
<input type="radio" name="product" ng-click="main.CreateProject.ProjectCatagorie = catagories">
Demo: http://plnkr.co/edit/awn63n7f1YBO5mOUMLDT?p=preview
ng-repeat does create a new child scope. The trick is to wrap the ng-model value in a object defined in the parent scope and everything works as expected.
<div ng-repeat="catagory in catagories">
<input type="radio" ng-model="selection.catagory" name="product" ng-value="catagory">
</div>
function myCtrl($scope) {
$scope.selection = {catagory : null};
$scope.catagories = [
{
id: 1,
title: 'Mobile and Desktop',
},
{
id: 2,
title: 'Desktop',
},
{
id: 3,
title: 'Mobile',
}
];
}
See https://fiddle.jshell.net/nbg58dto/