We Keep Coding

How to get value from dropdown list with angularjs

I populated a select box with data from the backend and it works well, but when I click on an item to get its value, it gives me undefined:
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
Here's the function:
$scope.showPopup=function(){
alert('eee');
alert($scope.MyData);
};

This is a working snippet of your code without the value attribute set in the option tag and the options have been hard coded ,it is working perfectly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option>heldfd</option>
<option>asdf</option>
<option>asdf</option>
<option>asdf</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
alert($scope.MyData);
};
});
</script>

Did you put your html code to div with ng-app and ng-controller defined and defined them in your Angular file? Remember also to write your Angular function into the controller.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
Angular:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
Remember also, that you don't have to use <option> tag - <select> with ng-options will be enough.

<div ng-controller="MyCtrl">
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.payloadSecteur = ['one', 'two', 'three', 'four'];
$scope.showPopup = function() {
console.log('eee');
console.log($scope.MyData);
};
}
JSFiddle

Try this:
Pass ng-model as a parameter in showPopup() like
ng-click="showPopup(MyData)"
In controller
$scope.showPopup=function(selectedData){
alert('eee');
alert(selectedData);
};

AngularJS - ng-change not firing

I'm setting the ng-change directive in a select element of my form but the function linked to it is not called when I change the value. I've been reading very similar questions and applying the answers I see and so far none has worked yet.
Can you see wjat I'm doing wrong?
My HTML:
<div class="row" ng-app="quoteApp">
<div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
<h1 class="page-header">Quote</h1>
<div class="form-group">
<label>Carrier</label>
<select class="form-control" ng-model="form_carrier_id" ng-change="loadProducts()">
<option ng-repeat="carrier in carriers" value="{{carrier.id}}">{[{carrier.name}]}</option>
</select>
</div>
<div class="form-group">
<label>Product</label>
<select class="form-control" ng-model="form_product_id">
<option value=""></option>
<option ng-repeat="product in products" value="{{product.id}}">{[{product.name}]}</option>
</select>
</div>
</div>
</div>
And my controller:
angular.module('quoteApp', ['angular-loading-bar']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
.controller('QuoteController', function ($scope, $http) {
$scope.carriers = [];
$scope.products = [];
$scope.form_carrier_id = '';
$scope.form_product_id = '';
$scope.getUrl = function(action){return '/admin/application/quote/json?action='+ action;}
$scope.initialize = function(){
// Get the list of carriers
$http.get($scope.getUrl('getCarriers'))
.success(function (data) {
$scope.carriers = data;
})
.error(function () {
alert('Error loading carriers');
});
}
$scope.loadProducts = function(){
alert('HERE');
}
});
For me everything looks right. Can you see what I'm missing? The first select loads normally, the problem is that when I change its value the function loadProducts is not fired.
Thanks

this may not be the problem itself, however you should always use ng-options rather than <option ng-repeat>
I've seen some weird behaviour in the past due to that

I have found what was the problem. It was how I was filling the select. It has to be filled like this:
<select class="form-control" ng-model="form_carrier_id"
ng-options='carrier.id as carrier.name for carrier in carriers'
ng-change="loadProducts()">
</select>

Try using ng-options for repeating the products in your select element.
You can use ng-options as follows:
<select class="form-control" ng-model="form_product_id"
ng-options="product.id as product.name for product in products" ng-change="loadProducts()">
<option value="">Select color</option>
</select>
not as the products are set values, the loadProduct should trigger, whenever a value is selected as the ng-model would be set

ng repeat list dropdown to filter another list dropdown

I have two drop down lists like the following:
HTML
<div class="col-md-3">
<select class="form-control" ng-model="select1">
<option value="" selected disabled>Select First</option>
<option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="select2">
<option value="" selected disabled>Select Second</option>
<option ng-repeat="item in items|filter:itemFilter" value="{{item.stuff}}">{{item.stuff}}</option>
</select>
</div>
my list of items looks like:
[
{name:"foo1", stuff:["bar1","bar2","bar3"]},
{name:"foo2", stuff:["bar4","bar5","bar6"]},
{name:"foo3", stuff:["bar7","bar8","bar9"]}
]
Controller
$scope.itemFilter = function (item) {
return item.name == $scope.select1;
};
Objective
When I select foo1 from the first dropdown, the second dropdown should have 3 options bar1,bar2,bar3
Current
When I select foo1 from the first dropdown, the second dropdown contains one option ["bar1","bar2","bar3"]

One way is to use a method to filter, and call that filter method on ngChange of the first drop-down.
<select class="form-control" ng-model="select1" ng-change="filterItems()">
Here is the definition of the filter method
$scope.filterItems = function() {
var index = 0;
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].name == $scope.select1) {
index = i;
break;
}
}
$scope.filteredItems = $scope.items[index].stuff;
};
And bind your second drop-down to the filtered list
<select class="form-control" ng-model="select2">
<option value="" selected disabled>Select Second</option>
<option ng-repeat="item in filteredItems">{{item}}</option>
</select>
Here is a fully working Plunkr

If Dropdown Selected, push into one array, otherwise, push into a different one

Im programming an app, and i want to push something in a Array, if a Item of the Dropdown is selected, if its not, then it should push it into another Array.
Heres some Code:
html.js
<label class="item item-input item-select">
<div class="input-label">
Muscle
</div>
<select ng-model="selOption">
<option>Chest</option>
<option>Biceps</option>
<option>Back</option>
<option>Stomach</option>
<option>Legs</option>
<option>Triceps</option>
<option>Shoulders</option>
<option>Traps</option>
</select>
</label>
app.js
$scope.selOption = "Chest";
$scope.createEx = function(){
if($selOption = "Chest")
{
$scope.chestEx.push({title:...., reps:....});
console.log("Test");
};
};

I don't know ionic-framework but in angular code and html need to change.
need to use value="someVlue" in your option tag and compare like if($scope.selOption === "Chest") instead of if($selOption = "Chest")
html:
<select ng-model="selOption"> <!--if you want to call on change value then use ng-change="createEx()"-->
<option value="Chest">Chest</option>
<option value="Biceps">Biceps</option>
<option value="Back">Back</option>
<option value="Stomach">Stomach</option>
<option value="Legs">Legs</option>
<option value="Triceps">Triceps</option>
<option value="Shoulders">Shoulders</option>
<option value="Traps">Traps</option>
</select>
and controller code:
$scope.selOption = "Chest";
$scope.createEx = function() {
if($scope.selOption === "Chest"){
$scope.chestEx.push({title:...., reps:....});
console.log("Test");
}
else {// as you need}
};

Another option is to use the ng-change directive and repeat an array of options like this:
https://jsfiddle.net/kdb9ed7f/
Controller
function Controller($scope) {
var vm = this;
vm.myOptions = [];
vm.options = [
'Chest',
'Biceps',
'Back',
'Stomach',
'Legs',
'Triceps',
'Shoulders',
'Traps'
];
vm.checkOption = checkOption;
function checkOption() {
if (vm.options[vm.selOption] == 'Chest') {
vm.myOptions.push({
name: 'Chest'
});
vm.selOption = null;
}
}
}
HTML
<div ng-controller="Controller as ctrl">
<select ng-model="ctrl.selOption" ng-options="k as v for (k,v) in ctrl.options" ng-change="ctrl.checkOption()">
<option>Select One</option>
</select>
<hr>
<ul>
<li ng-repeat="option in ctrl.myOptions">{{option.name}}</li>
</ul>
</div>

How do I data bind select lists to arrays in angular?

I need to have two drop down lists that contain integers 1 to 9 each initially. I think I can do that using something like the following:
<--html area-->
<select ng-repeat="num in MaxCupcakes">
<option ng-model="num" />
</select>
<select ng-repeat="num in MyCupcakes">
<option ng-model="num" />
</select>
<--script area -->
var app = angular.module("app", []);
app.controller('Ctrl', function() {
$scope.MaxCupcakes = [1,2,3,4,5,6,7,8,9];
$scope.MyCupcakes = [1,2,3,4,5,6,7,8,9];
});
Once I get this setup correct I would like what ever is selected in MaxCupcakes to limit the number in MyCupcakes. For example, if I set max cupcakes to 5, then I can only select 1-5 in mycupcakes.

A better method would be to use a filter on the second select.
<div ng-app ng-controller="Ctrl">
<select ng-model="max">
<option ng-repeat="num in MaxCupcakes" ng-click="changeMax(num)">
{{num}}
</option>
</select>
<select ng-model="foo>
<option ng-repeat="num in MyCupcakes | limitTo:max">
{{num}}
</li>
</select>
</div>
Also your arrays shouldn't have the {}. Here's what the ctrl should look like.
function Ctrl($scope) {
$scope.MaxCupcakes = [1,2,3,4,5,6,7,8,9];
$scope.MyCupcakes = [1,2,3,4,5,6,7,8,9];
$scope.max = 9;
};