How to binding select with radio buttons in ng-repeat? AngularJS - angularjs

How to binding select with radio buttons in ng-repeat?
I wona get tax from selected radio button in inner select.
When user picks town and price, radio button must be changed accordingly.
Help!
jsfiddle.net/hanze/pqh4eq96
html
<h1>Select </h1>
<div ng-app="" ng-controller="OrderCtrl">
<div class="radio" ng-repeat="delivery in deliveries">
<label>
<input type="radio" name="radioDelivery" ng-value="delivery" ng- model="$parent.selectedDelivery">
{{delivery.name}}. {{delivery.desc}}
<select>
<option ng-repeat="tax in delivery.tax" ng-value="tax" ng- model="$parent.selectedTax">{{tax.town}} {{tax.price}} $ </option>
</select>
</label>
</div>
<br>Delivery: {{selectedDelivery.name}}
<br>Tax delivery: {{ }} /// ??</div>
js
OrderCtrl = function ($scope) {
$scope.deliveries = [{
name: "RussianPOST",
tax: [{
town: "Moscow",
price: 10,
}, {
town: "Izhevsk",
price: 30,
}]
}, {
name: "DHL",
tax: [{
town: "Moscow",
price: 50,
}, {
town: "Izhevsk",
price: 100,
}]
}
];
$scope.selectedDelivery = $scope.deliveries[0];
}

In your script:
OrderCtrl = function ($scope) {
$scope.deliveries = [{
name: "RussianPOST",
tax: [{
town: "Moscow",
price: 10,
}, {
town: "Izhevsk",
price: 30,
}]
}, {
name: "DHL",
tax: [{
town: "Moscow",
price: 50,
}, {
town: "Izhevsk",
price: 100,
}]
}
];
$scope.selectedDelivery = $scope.deliveries[0];
$scope.TaxSelect=function(tax){
$scope.selectedTax = tax;
}
}
Your option (I am not sure if ng-model is needed here, but i am letting it stay):
<option ng-repeat="tax in delivery.tax" ng-value="tax" ng-model="$parent.selectedTax" ng-click="TaxSelect(tax)">{{tax.town}} {{tax.price}} $</option>
Your display:
Tax delivery: {{ selectedTax.town}}, {{ selectedTax.price}}
Fiddle DEMO

Related

AngularJS ng-class inside ng-repeat expression

i am trying to show dynamic form error validations using below code but i am getting exception inside ng-class expressions. what is my mistake and how can i solve this?
.html
<form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
<div ng-repeat="field in entity.fields">
<ng-form name="form">
<!-- TEXT FIELDS -->
<div ng-if="field.type=='text'" class="form-group" ng-class="{ 'has-error' :
form.+field.name+.$dirty && form.+field.name+.$error.required,
'has-success': form.+field.name+.$valid}">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
class="form-control" required />
<p class="help-block" ng-show="{{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required</p>
</div>
</div>
</ng-form>
</div>
</form>
.controller
routerApp.controller('DynamicController1', ['$scope', function ($scope) {
// we would get this from the api
$scope.entity = {
name: "Course",
fields:
[
{ type: "text", name: "firstname", label: "Name", required: true, data: "" },
{ type: "radio", name: "color_id", label: "Colors", options: [{ id: 1, name: "orange" }, { id: 2, name: "pink" }, { id: 3, name: "gray" }, { id: 4, name: "cyan" }], required: true, data: "" },
{ type: "email", name: "emailUser", label: "Email", required: true, data: "" },
{ type: "text", name: "city", label: "City", required: true, data: "" },
{ type: "password", name: "pass", label: "Password", min: 6, max: 20, required: true, data: "" },
{ type: "select", name: "teacher_id", label: "Teacher", options: [{ name: "Mark" }, { name: "Claire" }, { name: "Daniel" }, { name: "Gary" }], required: true, data: "" },
{ type: "checkbox", name: "car_id", label: "Cars", options: [{ id: 1, name: "bmw" }, { id: 2, name: "audi" }, { id: 3, name: "porche" }, { id: 4, name: "jaguar" }], required: true, data: "" }
]
};
}]);
https://codepen.io/rama-krishna-the-selector/pen/PXOwQp?editors=1010
angular.js:15536 Error: [$parse:syntax] http://errors.angularjs.org/1.7.5/$parse/syntax?p0=%2B&p1=is%20not%20a%20valid%20identifier&p2=119&p3=%7B%20'has-error'%20%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20form.firstname.%24dirty%20%26%26%20form.firstname.%24error.required%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20'has-success'%3A%20form.%2Bfield.name%2B.%24valid%7D&p4=%2Bfield.name%2B.%24valid%7D
The only correct way should be
<div ng-repeat="field in entity.fields">
<ng-form name="form">
<div ng-if="field.type=='text'" class="form-group" ng-class="{ 'has-error' :
form[field.name].$dirty && form[field.name].$error.required,
'has-success': form[field.name].$valid}">
<label class="col-sm-2 control-label">{{field.label}}</label>
<div class="col-sm-6">
<input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
class="form-control" required />
<p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">Required</p>
</div>
</div>
</ng-form>
codeopen
The point is to access form object property, that stored in a variable. This can be done only this way form[field.name], but what you did - you tried to merge object properties and names into a single string, that wont work that way

Angularjs Select options issue

I'm new to angularjs. what i'm trying to do is this when i select an options from selectbox1 and selectbox2 value changes according to that value from selectbox1.
For Example: if the user choose Frontend from selectbox1 and selectbox2 need to display values are 'css, jquery, html, angularjs', but here when i choose any options from selectbox1. it display 'php, ruby, c#, python', any idea what i'm doing wrong. please help me.
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
angular.forEach($scope.data, function (value, key) {
$scope.values = value;
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="FrontEnd">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
It should be like this.
you have some problems.
The option value for first select tag was incorrect.
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
angular.module("ctrl", [])
.controller("appsctrl", function($scope) {
$scope.data = {
"frontend": [{
id: 1,
name: 'css'
}, {
id: 2,
name: 'jquery'
}, {
id: 3,
name: 'html'
}, {
id: 4,
name: 'angularjs'
}],
"Server": [{
id: 1,
name: 'php'
}, {
id: 2,
name: 'ruby'
}, {
id: 3,
name: 'c#'
}, {
id: 4,
name: 'python'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select">
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]">
<option value="" style="display:none">Select</option>
</select>
</div>
</div>
Try this. Change the value of select option, from FrontEnd to frontend. and now on changing the select option, the ng-model for your select will be frontend or Server and on the controller use $scope.values = $scope.data[$scope.select] in your change event. That will solve your issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
<script type="text/javascript">
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
$scope.values = $scope.data[$scope.select];
}
});
</script>
</body>
</html>

Angulajs: How to apply filter using select form after clicking save button?

In table I'm displaying name, designation and company of employees. I want to use select form to select the name of company. When I select company name and then click save button as result I only want to display names, designations and company of employees that for example work for Google.
Also I want to have displayed number of how many employee is it.
But kinnda got stucked my save button is not working, and also don't have number of employe.
file.html
<body ng-controller="MyController">
<div>
<table>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
<tr ng-repeat="employee in clients">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.company.name}}</td>
</tr>
</table>
</div>
<div>
<ul>
<li>
<h2>Select Company:</h2>
<select ng-model="selectedCompany">
<option ng-repeat="c in companyList" value="{{c.name}}">{{c.name}}</option>
</select>
<h3>You selected: {{selectedCompany}}</h3>
</li>
</ul>
<button ng-click="$ctrl.updateSearch()">Filter</button>
</div>
</body>
file.js
var controllers = angular.module('MyApp.controllers', [])
controllers.controller('MyController', function ($scope) {
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];
$scope.companyList = [{
name: 'Apple',
slug: 'Apple'
}, {
name: 'Google',
slug: 'Google'
}, {
name: 'Microsoft',
slug: 'Microsoft'
}, {
name: 'Facebook',
slug: 'Facebook'
},
];
$scope.updateSearch = function() {
console.log($scope.selectedCompany);
}
});
There are few changes needs to be done on your view, Change your model variables to be different from the array names, such as colorn,sizen and brandn.
<div>
<label>Color:</label>
<select ng-model="colorn" ng-options="option.name for option in colorStatus track by option.slug"></select>
</div>
<div>
<label>Size</label>
<select ng-model="sizen" ng-options="option.name for option in size track by option.slug"></select>
</div>
<div>
<label>Brand</label>
<select ng-model="brandn" ng-options="option.name for option in $ctrl.brand track by option.slug"></select>
</div>
<button ng-click="updateSearch()">Save</button>
Also you can get the values using your $scope variable,
Controller
$scope.updateSearch = function(){
console.log($scope.colorn);
console.log($scope.sizen);
console.log($scope.sizen);
}
DEMO

Problems with ui-select2 and ng-options

Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.
The problem:
Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?
Controller:
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
View:
<div ng-controller="MyCtrl">
<label for="1">Please select items:</label>
<select id="1"
ui-select2
multiple
ng-model='selectedDaltons'
ng-options="dalton.id as dalton.name for dalton in daltons">
</select>
<label for="2">Selected Items:</label>
<ul id="2">
<li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
</ul>
</div>
Here it is as a jsfiddle
I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:
http://jsfiddle.net/u48j0yyc/1/
<div ng-controller="MyCtrl">
<label>Please select items:</label>
<select ui-select2 multiple ng-model='selectedDaltons'>
<option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
</select>
<label>Selected Items:</label>
<ul>
<div ng-bind="selectedDaltons"></div>
</ul>
</div>
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};

How to get data from radio buttons? angularjs

i wona get price and name of chosen radio buttons. its easy with simple html tags.
But I stacked when i trying generate radio buttons via angularjs from array (items)
Help!
http://jsfiddle.net/hanze/j9x23apu/
html
<h1>Select </h1>
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items">
<div class="radio">
<label>
<input type="radio" name="item" ng-model="item" ng-checked="{{item.checked}}">
{{item.name}} +{{item.price}} $.</label>
</div>
</div>
Your choice: {{}} **what i must write here?**
<br>
Price: {{}} **and here?**
</div>
js
OrderCtrl = function ($scope) {
$scope.items = [{
name: 'None',
value: "no",
price: 0,
checked: true
}, {
name: 'Black',
value: "black",
price: 99,
checked: false
}, {
name: 'White',
value: "white",
price: 99,
checked: false
}, {
name: 'Barhat',
value: "barhat",
price: 49,
checked: false
}, {
name: 'Barhat',
value: "cream",
price: 49,
checked: false
}]
You can look at the angularjs documentaion about radio buttons here. You don't need to use ng-checked here. Use ng-value to set the value when redio is selected.
I changed your jsfiddle post.
Your are missing the closing tag for your input. And when you have ng-repeat you have a seperate scope. In this case you need $parent.selectedItem to hold your selected elements.
I have updated the JSFiddle with a working state solution.
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items" style="text-indent: 30px">
<input type="radio" name="itemRadio" ng-model="$parent.selectedItem" ng-value="item.name"/>
{{item.name + '-' + item.price}}$.
</div>
Your choice: {{selectedItem}}
</div>
jsFiddle: http://jsfiddle.net/j9x23apu/16/
html
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items" style="text-indent: 30px">
<label>
<input type="radio" name="item" ng-checked="{{item.checked}}" ng-click="change_item($event)" item-name="{{item.name}}" item-price="{{item.price}}" /> {{item.name}} + {{item.price}}
</label>
</div>
Your choice: {{selectedName}}
<br />
Price: {{selectedPrice}}
</div>
js
OrderCtrl = function ($scope) {
$scope.change_item = function(e) {
$scope.selectedName = e.target.attributes['item-name'].value;
$scope.selectedPrice = e.target.attributes['item-price'].value;
};
$scope.items = [{
name: 'None',
value: "no",
price: 0,
checked: true
}, {
name: 'Black',
value: "black",
price: 99,
checked: false
}, {
name: 'White',
value: "white",
price: 99,
checked: false
}, {
name: 'Barhat',
value: "barhat",
price: 49,
checked: false
}, {
name: 'Barhat',
value: "cream",
price: 49,
checked: false
}]
}

Resources