Develop Reference

How to get ID from select box using AngularJS

I am new to Angular JS. I have the following <select> options, and I have to send id of the community i.e., x.community_type_id to fetch subcommunity.
<select>
<option ng-repeat="x in myData" ng-click="sendID({{ x.community_type_id }})">{{ x.community_Type }}</option>
</select>
Right now I am using the following code to fetch data from web service to select option.
var app = angular.module('EntityApp', []);
app.controller('EntityAppCntroller', function($scope, $http) {
$http.get("http://111.222.22.333:1081/apartment/community/type/list")
.then(function (response) {
$scope.myData = response.data.type;
});
$scope.sendID = function (id) {
alert(langKey);
}
});
I want to send x.community_type_id to a web service.
That webservice url is like this :
http://11.338.41.149:8481/apartment/register/sub/community/type

In Angular, when an attribute starts with ng-, it is evaluated as JavaScript, hence you can do away with the double curly braces:
<select>
<option ng-repeat="x in myData" ng-click="sendID(x.community_type_id)">{{ x.community_Type }}</option>
</select>

remove the curly brackets in the ng-click function
<select>
<option ng-repeat="x in myData" ng-click="sendID( x.community_type_id )">{{ x.community_Type }}</option>
</select>

try this
html
ng-click="sendID( x.community_type_id )"
js
$scope.sendID = function (id) {
$http({
method:'GET',
url:'yoururl'+id,
data:{'id':id}
///
})
}

Try like this
<select ng-model="model" ng-options="x.community_type_id as
x.community_Type for x in myData" ng-click="sendID(model)">
<option ></option>
</select>

Angular select display image with each option before submitting form

Update: Solved! Please see my answer below.
I am trying to display a different image with each select option in Angular. As a user clicks on each option in a menu, a different image appears next to the menu. All of this is before the form is submitted. Basically trying to do what is done here in this fiddle, but in Angular: http://jsfiddle.net/treyh/xf2pq/
html:
Current image: {{myCar.url}}
<br>
<select ng-model="myCar" class="form-control">
<option value="">Choose a car...</option>
<option ng-repeat="car in cars" value="{{car}}" data-image = "{{car.url}}">{{car.label}}</option>
</select>
in the js file, inside the controller:
$scope.cars = [
{url: 'Volvo.png', label: 'Volvo'},
{url: 'Benz.png', label: 'Benz'},
{url: 'JohnDeer.png', label: 'John Deer'},
{url: 'BMW.png', label: 'BMW'},
];

I have figured out how to do this using ng-repeat and $Scope.
in the js file, inside the controller:
$scope.cars = ['Volvo', 'Benz', 'Toyota'];
$scope.myCar = "";
var carURL = {
Volvo: 'volvo.png',
Benz: 'benz.png',
Toyota: 'toyota.png'
};
$scope.getCarURL = function(brand) {
return carURL[brand];
}
and in the html:
<select ng-model="myCar">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
<img ng-src="{{getCarUrl(myCar)}}">

Select inputs in Angular are a bit confusing at first, but here is one way to set it up.
angular
.module('app',[])
.controller('AppCtrl',AppCtrl);
function AppCtrl() {
var vm = this;
vm.car_image = null;
vm.cars = [
{
'url':'audi.jpg',
'name':'Audi'
},
{
'url':'bmw.jpg',
'name':'BMW'
}
]
}
<div ng-controller="AppCtrl as ctrl">
<select ng-model="ctrl.car_image" ng-options="c.url as c.name for c in ctrl.cars" class="form-control"></select>
<hr>
<img ng-src="images/{{ctrl.car_image}}" ng-show="ctrl.car_image">
</div>
Using ng-src will prevent a 404 error initially when the page loads. So when you select the option you need, the ng-model from the select input is applied to the image tag.

ng-model weird behavior with Asynchronous function

Below is drop down selection code :
<select ng-model="filter.area">
<option value="">Select your location</option>
<option ng-repeat="area in areaNames" value='{{ area.area_name }}'>{{ area.area_name }}</option>
</select>
ng-model is set in controller before Async function is called:
$scope.filter.area = $cookies['filterArea'];
// which evaluated to some value lets say 'Bole'
Now comes asynchronous function:
query.find({
success: function(results_area) {
$scope.$apply(function() {
$scope.areaNames = results_area;
for (var i = 0; i < $scope.areaNames.length; i++) {
$scope.areaNames[i].area_name = $scope.areaNames[i].get('name');
};
});
},
error: function(error) {
console.log("error in fetching area info....");
}
});
ng-model isn't updating. Any idea whats wrong here?
To see the demo go here :
http://peppy-avatar-762.appspot.com/
Then select "Addis Ababa" and Select "Bole" as area then click on find food! Check area filter on left side. ng-model doesn't get updated!

If the options are loaded lazily, use ng-options instead of using ng-repeat on option
<select data-ng-model="selectedItem"
data-ng-options="item for item in items track by item">
</select>
Working Plnkr

Can't set select value from my controller, Angular JS

From this example
I'm trying to set the select value from my controller and this doesn't work for me even when I set the id as explained in many questions here. The only difference is that I have a default value set with ng-init. How do I set the value from the controller?
DOM:
<select ng-model="storeorder" ng-init="storeorder = 0" ng-change="storeOrderChange(storeorder)">
<option value="0">-- All orders --</option>
<option ng-repeat="obj in orders" value="{{ obj.id }}">{{ obj.name }}</option>
</select>
JS inside a function:
$scope.orders = data;
$scope.storeorder = parseInt($scope.order); // Tried without parseInt also
console.log($scope.storeorder) returns the right value, but it doesn't set the right value in the browser DOM.

If you don't want to use ng-options(which is the right way) , you can try with
ng-selected : Working Demo : http://jsfiddle.net/nf2m0rr1/
Example :
<body ng-app ng-controller="OrderCtrl">
<div>Order is: {{storeorder}}</div>
<select ng-model="storeorder">
<option ng-selected="{{order.value == storeorder}}" ng-repeat="order in orders" value="{{order.value}}">{{order.displayName}}</option>
</select>
</body>
function OrderCtrl($scope) {
$scope.storeorder = 2;
$scope.orders = [{
value: '1',
displayName: 'Order One'
}, {
value: '2',
displayName: 'Order Two'
}]
}

Use ng-options:
<select ng-model="storeorder" ng-init="storeorder = 0" ng-change="storeOrderChange(storeorder)" ng-options="obj.id as obj.name for obj in orders">

ng-options solved 50% of the problem but I still needed to handle the default value in the DOM and change the ng-init option. This was really bugging me. Here's the complete solution which enabled me to not set anything from the controller:
<select ng-model="storeorder" ng-options="orderdata.id as orderdata.name for orderdata in orders" ng-init="storeorder = order == 0 ? 0 : order" ng-if="orders.length > 0" ng-change="storeOrderChange(storeorder)">
<option value="">-- All orders --</option>
</select>

Using ng-hide or ng-show on select box option

Is it possible to hide select box options using the ng-hide directive?
http://jsfiddle.net/cr4UB/
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two" ng-hide="myDropDown=='one'">Two</option>
<option value="three">Three</option>
</select>
{{myDropDown}}
</div>

AngularJS 1.1.5 has a directive ng-if which can work for you. Check this fiddle http://jsfiddle.net/cmyworld/bgsVw/

I couldn't get it to work using ng-hide to check the value of your ng-model (likely some race-condition with reading/writing to the same model at once), however, I did come up with a working example of the functionality you're after:
View markup
<div ng-app ng-controller="Controller">
<select ng-model="selectedOption" ng-options="o for o in options"></select>
{{selectedOption}}
</div>
Controller
function Controller ($scope) {
var initialOptions = ['One', 'Two', 'Three'];
$scope.options = initialOptions;
$scope.selectedOption = $scope.options[2]; // pick "Three" by default
$scope.$watch('selectedOption', function( val ) {
if( val === 'One' ) {
$scope.options = ['One', 'Three'];
} else {
$scope.options = initialOptions;
}
});
}