Develop Reference

Angular JS- 1st Dropdown linked to 2nd linked to 3rd. Now I need selected data from 3rd drop down to display in another textarea

I have posted the script and the controller. From one drop down I goto the second one and from the second to third. for example amazon's website where you got categories then to electronics and then to mobile.
Now I want to take that selected mobile and put it in another textarea.
I am building a sales management project and I am new to angular JS.
<!--This is the script--!> <script>
function CategoryCntrl($scope) {
$scope.categories = {'Electronics': {
'Mobile': ['Samsung S6', 'Nokia 6', 'Motorola M2', 'Oneplus 3T'],
'EarPhones': ['House of Marley H76', 'Sennheiser S789', 'Creative T242'],
'Mouse': ['HP HP56', 'LG L11', 'Frontech F223']
},
'Clothing': {
'T-Shirt': ['Levis T-Shirt 1231', 'PEPE T P6534', 'UCB T D7678'],
'Shirt': ['Peter Englang P5466', 'Soldado S0944'],
'Trouser': ['Vero Moda V6767', 'Arrow A6799']
},
'Books': {
'Fiction': ['Red Serpant- Knox Vermount', 'Clove- Heather Tove', 'MajinBoo- Goku Gohan'],
'Non-Fiction': ['Wings of Fire - APJ']
}
};
}
</script>
----------------------------------------------------------------------- <!--This is the controller--!>
<div ng-controller="CategoryCntrl">
Category:
<select class="select form-control" id="category" ng-model="productTypes" ng-options="category for (category, productTypes) in categories">
<option value=''>Select</option>
</select>
Product Type: <select class="select form-control" id="productT" ng-disabled="!productTypes" ng-model="products" ng-options="productT for (productT,product) in productTypes"><option value=''>Select</option></select>
Product: <select class="select form-control" id="product" ng-disabled="!products || !productTypes" ng-model="product"><option value=''>Select</option> <option ng-repeat="product in products" value='{{product}}'>{{product}}</option></select>
</div>
----------------------------------------------------------------------------
<p>To be displayed here</p>

i have changed some areas in your code and seems to be working now.
Angular Controller Code
var app=angular.module('categoryApp',[]);
app.controller('categoryCntrl',['$scope',function($scope){
$scope.categories = {'Electronics': {
'Mobile': ['Samsung S6', 'Nokia 6', 'Motorola M2', 'Oneplus 3T'],
'EarPhones': ['House of Marley H76', 'Sennheiser S789', 'Creative T242'],
'Mouse': ['HP HP56', 'LG L11', 'Frontech F223']
},
'Clothing': {
'T-Shirt': ['Levis T-Shirt 1231', 'PEPE T P6534', 'UCB T D7678'],
'Shirt': ['Peter Englang P5466', 'Soldado S0944'],
'Trouser': ['Vero Moda V6767', 'Arrow A6799']
},
'Books': {
'Fiction': ['Red Serpant- Knox Vermount', 'Clove- Heather Tove', 'MajinBoo- Goku Gohan'],
'Non-Fiction': ['Wings of Fire - APJ']
}
};
}]);
Code for HTML template
<div ng-app="categoryApp">
<div ng-controller="categoryCntrl">
Category:
<select class="select form-control" id="category" ng-model="productTypes" ng-options="category for (category, productTypes) in categories">
<option value=''>Select</option>
</select>
Product Type: <select class="select form-control" id="productT" ng-disabled="!productTypes" ng-model="products" ng-options="productT for (productT,product) in productTypes"><option value=''>Select</option></select>
Product: <select class="select form-control" id="product" ng-disabled="!products || !productTypes" ng-model="product"><option value=''>Select</option> <option ng-repeat="product in products" value='{{product}}'>{{product}}</option></select>
</div>
</div>

get dropdown value for SELECT from db instead of hardcoding at UI (Angularjs)

I have the following dropdown select HTML tags
<label>Car:</label>
<select ng-model="params.CarName">
<option value="x" disabled="" selected="">Select Car...</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
</select>
<label>Model:</label>
<select ng-if="params.CarName == 'BMW'" ng-model="params.CarModel" ng-change="PerfRpt()">
<option value="x" disabled="" selected="">BMW Sports</option>
<option value="BMW 328i">BMW 328i</option>
<option value="BMW Sports">BMW Sports</option>
</select>
<select ng-if="params.CarName == 'Audi'" ng-model="params.CarModel" ng-change="PerfRpt()">
<option value=" " disabled="" selected="">Audi Sports</option>
<option value="Audi i345">Audi i345</option>
<option value="Audi Sports">Audi Sports</option>
</select>
<select ng-if="params.CarName!= 'BMW' && params.CarName != 'Audi'">
<option>-</option>
</select>
As per the above code, this is wat it does, We have a dropdown to select Car. It is either BMW or Audi.
Depending on this selection, The Model dropdown will be shown. For e.g If we select Audi for Car in the first dropdown, then Audi i345 and Audi Sports will be shown as the dropdown in the 'Model' field.
Similarly, other options will be shown if we select BMW.
Now I am planning to put the Car data in DB along with Model data. Once the page loads, the data will be retrieved and displayed to the user for the 'Car' section. Once the car is selected, depending on the value of the car, its corresponding Model will be updated in the Model section then.
I can get the data from backend to frontend. I want to know how to display those values dynamically and not hardcode like I have done here.
I have the following response from database for the Car.
Results: Array[2]
0: Object
Car:BMW
1: Object
Car:Audi

You need an array with the Car Names, eg.
$scope.carNameOptions = [
'BMW'
'Audi'
];
Then you would do this:
<select ng-model="params.CarName">
<option value="">Select car...</option>
<option ng-repeat="car in carNameOptions" value="{{car}}">{{car}}</option>
</select>
I would suggest making params.CarModel an object with the keys being the CarNames, and the value an array with options for the car like above. Then you can do this:
<select ng-model="params.CarModel">
<option value="">Select model...</option>
<option ng-repeat="carModel in carModelOptions[params.CarName]" value="{{carModel}}">{{carModel}}</option>
</select>
eg
$scope.carModelOptions = {
'BMW' : [
'BMW 328i',
...
],
'Audi' : [...]
}

Since you have only the cars models stored in your database, you can retrieve them and then make a new array putting inside it the types, as follows:
(function() {
"use strict";
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
// From database
var data = [
'BMW',
'Audi'
];
$scope.cars = [
{
"model":"BMW",
"types":[
"BMW 328i",
"BMW Sports"
]
},
{
"model":"Audi",
"types":[
"Audi i345",
"Audi Sports"
]
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<select class="form-control" ng-options="car.model for car in cars" ng-model="carSelected">
<option value="" label="Select a car" hidden></option>
</select>
<select class="form-control" ng-disabled="!carSelected" ng-options="type for type in carSelected.types" ng-model="typeSelected">
<option value="" label="Select a type" hidden></option>
</select>
<hr>
Car selected: <pre ng-bind="carSelected | json"></pre>
Type selected: <pre ng-bind="typeSelected"></pre>
</div>
</body>
</html>
Note: I've used ngOptions directive, which one MUST be used for <select>, not ngRepeat.
I hope it helps.

Select option doesnt bind with ng-model

I have an object with AllCountries and SelectedCoutry.
I want to list all countries on a <select> and select the option with ng-model by the value of SelectedCountry.
But the default value of combobox gets selected null.
Example:
angular.module('ngPatternExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.OBJ = {
"OBJ": {
"AllCountries": [
{
"country": "USA",
"id": 1
},
{
"country": "Mexico",
"id": 2
},
{
"country": "Canada",
"id": 3
}
],
"SelectedCountry": {
"country_id": 1,
}
}
}
$scope.AM = $scope.OBJ.OBJ;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngPatternExample">
<div ng-controller="ExampleController">
selected country: {{AM.SelectedCountry.country_id}} <br/>
<select class="form-control" ng-model="AM.SelectedCountry.country_id">
<option value=""> --- </option>
<option ng-repeat="co in AM.AllCountries" value="{{co.id}}"> {{co.country}} </option>
</select>
</div>
</body>
(http://plnkr.co/edit/PI3tOrIMSTMwGC0rYA5q?p=preview)
p.s A good explanation why this doesnt work allways in Angular would be great

Replace your select with this
<select class="form-control" ng-options="co.id as co.country for co in OBJ.OBJ.AllCountries" ng-model="AM.SelectedCountry.country_id">
<option value=""> --- </option>
</select>

Use ngOptions directive instead of repeating options in the select box by yourself.
<select
class="form-control"
ng-model="AM.SelectedCountry.country_id"
ng-options="co.id as co.country for co in AM.AllCountries">
<option value=""> --- </option>
</select>
Updated plunk:
http://plnkr.co/edit/FZcJVkJQlbLM3k544s8S?p=preview

Select element value is not binding because of type mismatch in angularjs 1.4

I am using a ng-model and it is assigned a value but it is not binding with selected element.
<select data-ng-model="myval">
<option value="? number:2 ?"></option>
<option value="2" class="ng-binding">Value 1</option>
<option value="3" class="ng-binding">Value 2</option>
</select>
in the above code snippet number:2 is generated because myval is assigned to 2 and
I noticed that it is because of type mismatch. My question is how will we give value in option tag with type number?
Thanks in advance.

I always use the ng-options directive instead of a custom select with an ng-repeat and many ng-value
If you have something like this :
$scope.items = [
{ id: 1, title: 'key #1' },
{ id: 2, title: 'key #2' }
];
Then you should do :
<select ng-model="selected" ng-options="item.title for item in items"></select>
You will get :
<select ng-model="selected" ng-options="item.title for item in items">
<option value="key #1"></option>
<option value="key #2"></option>
</select>
And the binding will allow you to do :
console.log($scope.selected); // { id: 2, name: 'key #2' }
You can find an example here : http://codepen.io/anon/pen/GpKKaW

How to populate value in a select dropdown as default using angular js

<select data-ng-model="userInf.role" class="span12" required>
<option value="" selected="selected" disabled="disabled">Choose one</option>
<option data-ng-repeat="role in roles" value="{{ role.text }}">{{ role.text }}</option>
</select>
angular
userService.getUser($scope.userInf,
function( data ) // success
{
$scope.userInf = {
username: data.userName,
firstname: data.firstName,
middlename: data.middleName,
lastname: data.lastName,
title: data.title,
organization: data.organization,
role: data.authorization.role,
dateOfBirth:data.dateOfBirth,
save: 'update'
};
},
Other fileds are coming but select value is not coming
In inspect element i can see
<select data-ng-model="userInf.role" class="span12 ng-pristine ng-valid ng-valid-required" required="">
<option value="? string:Analyst ?"></option>
<option value="" selected="selected" disabled="disabled">Choose one</option>
<!-- ngRepeat: role in roles --><option data-ng-repeat="role in roles" value="Analyst" class="ng-scope ng-binding">Analyst</option>
<option data-ng-repeat="role in roles" value="Admin" class="ng-scope ng-binding">Admin</option>
</select>

I know that Angular has the ng-init directive for this very purpose. Why don'y you try the ng-options directive? You can use the ng-init directive side by side with ng-options, and ng-options is a little more flexible than ng-repeat.
<select ng-model="userInf.role" ng-options="role for role in roles" ng-init="userInf.role = '' " class="span12 ng-pristine ng-valid ng-valid-required" required="">
<option value="" disabled="disabled">Choose one</option>
</select>
The ng-init will set your ng-model, which is the value of the options defined below, to whatever you want, in this case, setting your ng-model to '' which is the value of your first option. The ng-options will populate the rest of your options for you with the values in your array. You might need some setup to display the correct names and values in your options. Look here https://docs.angularjs.org/api/ng/directive/select

Yeah, I would do it like this:
var app = angular.module('app', [])
app.controller('exampleCtrl', function ($scope) {
$scope.options = ["a", "b", "c"]
$scope.selected = $scope.options[1]
})
<select ng-options="o for o in options" ng-model="selected"></select>
Option "b" will be selected on load

<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>