I have a select like:
<select multiple ng-multiple="true" ng-model="selectMulti" ng-options="br.Name for br in branches"></select>
Scope objects in controller are as below:
vehicleFactory.getBranches().success(function (data) {
$scope.branches = data;
}).error(function (data) {
$scope.loading = false;
});
vehicleFactory.getVehicle().success(function (data) {
$scope.vehicle = data;
$scope.selectMulti = $scope.vehicle.AssociatedBranches;
}).error(function (data) {
$scope.loading = false;
});
It is not selecting multiple items in select as it was not binding.
What is wrong in it.
When you use <select multiple..> the ViewModel of it is an array (unlike <select> without multiple).
So, say you have:
$scope.branches = [{...}, {...}, ...];
and the View:
<select multiple ng-model="selectMulti" ng-options="br.Name for br in branches">
</select>
Then, if you would like to select default values, your $scope.selectMulti should be an array of these values:
$scope.selectMulti = [$scope.branches[0], $scope.branches[1]];
Related
I am using dataFactory for getting collection by making api call.
productApp.factory("productDataFactory", function($http){
return {
getUnits: function() {
return $http.get('/unit').then(function(resp) {
return resp.data; // success callback returns this
});
},
getCommodities: function() {
return $http.get('/commodity').then((resp) => {
return resp.data;
})
}
};
});
I use commodities collection in ng-options to populate options of select element.
<select ng-model='selected_Commodity' ng-change="updateGST()" name="commodity" id="commodity" ng-options = " c as c.commodity_name for c in <%= JSON.stringify(commodities) %> track by c "class="form-control selectpicker" data-size="4" data-live-search="true" data-index="5" >
<option value="" ng-hide='selected_Commodity'>Select Commodity</option>
</select>
I am updating collection on a event. I am getting updated values in log. But It does not get reflected in my view.
var getCommodities = function() {
var deferred = $q.defer();
productDataFactory.getCommodities().then((data) => {
if (data.type === 'success') {
debugger;
console.log("Inside factory ");
console.log(JSON.stringify( data.commodities ));
deferred.resolve(data.commodities);
} else {
// $scope.commodities = [{name : data.type + data.msg}]
deferred.reject([{name : data.type + data.msg}]);
}
})
return deferred.promise;
}
$('#commodityModal').on('hide.bs.modal', function () {
$scope.commodities = []
getCommodities().then((data) => {
$scope.commodities = data
console.log("Inside Hide ");
console.log(JSON.stringify( $scope.commodities ));
$("#commodity").selectpicker('refresh')
console.log("Refreshed");
})
})
Please help me how can I rebind my select elements with updated values.
Put this line inside a timeout like this and add timeout as a dependency
$timeout(function(){
$("#commodity").selectpicker('refresh');
});
Change the ng-options
FROM
ng-options = " c as c.commodity_name for c in <%= JSON.stringify(commodities) %> track by c "
TO
ng-options = " c as c.commodity_name for c in commodities track by c "
I am new to Angular 1,so I am stuck with building a dropdown box dynamically using angular.
Below is my code
var app = angular.module('myApp', []);
app.controller('TestCtrl', function($scope, $http) {
I have created an onchange function getTypeName() and have passed the parameters using get method and retrieved the result as json .
$scope.getTypeName = function (type) {
$http.get('get-type-name',
{ params:
{
type: type
}
}).then(
function(response){
var data = response.data;
for(i = 0; i < data.length; i++) {
//code to build dropdown
}
},
);
}
});
Below is my response,
[
{"id":"001","name":"ABC"},
{"id":"002","name":"DEF"},
{"id":"003","name":"GHI"}
]
I want to build a dropdown box using this response within the get method function success using for loop.Please provide a solution to solve this out.
you do like this
in app.js
$scope.getTypeName = function (type) {
$http.get('get-type-name',
{ params:
{
type: type
}
}).then(
function(response){
$scope.data = response.data;
},
);
}
});
in your html
<select id="ddl" model="ddldata" typeof="text"required>
<option data-ng-repeat="ProjectName in data" value="{{ProjectName.id}}" ng-bind={{ProjectName.name}}">
</select>
You can try this,
$scope.yourOptions = [];
$scope.getTypeName = function (type) {$http.get('get-type-name',
{ params:
{
type: type
}
}).then(
function(response){
var data = response.data;
$scope.yourOptions = data;
},
);
}
});
in html,
<select class="form-control" ng-model="whatever" >
<option ng-repeat="x in yourOptions " value="{{x.id}}">{{x.name}}</option>
</select>
Here is an example of dynamically populating select options from an http get https://plnkr.co/edit/7PS7LBBNZA2cNzMorrB9?p=preview
<select ng-model="selectedItem">
<option ng-repeat="o in options">{{o.name}}</option>
</select>
$scope.getTypeName = function() {
$http.get('https://jsonplaceholder.typicode.com/users').then(
function(result) {
$scope.options = result.data;
},
function(error) {
console.log(error);
}
);
};
I want to populate a dropdownlist with values from a table I created called Venues. This table has only two things in it, the Venue Id and Name.
I created a Code First Entity Data Model from the database that holds the table Venues and I created this method in my controller:
public JsonResult GetVenues()
{
using (ReservationsModel dc = new ReservationsModel())
{
var v = dc.Venues.OrderBy(a => a.Name).ToList();
return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
then in my script i added:
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
venues.push(item.Name);
});
$scope.list = venues;
}).error(function (status) {
alert(status);
});
$scope.selectedVenue = $scope.venues[i].Name;
and in my view I have:
<select ng-model="selectedVenue" ng-options="item in venues">
<option value="">-- Select Venue --</option>
</select>
I came from these guides:
http://www.dotnetawesome.com/2016/04/implement-event-scheduler-calendar-angularjs.html
How can I populate a select dropdown list from a JSON feed with AngularJS?
https://jsfiddle.net/pravinmagar/Ljgk8oy0/
Let's see your code.(check the comments)
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
// this should be $scope.venues, not just venues
venues.push(item.Name);
});
// you don't need another scope variable
$scope.list = venues;
}).error(function (status) {
alert(status);
});
// as $scope.venues is an array of Names, $scope.selectedVenue = $scope.venues[i] is enough
$scope.selectedVenue = $scope.venues[i].Name;
So,
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
$scope.venues.push(item.Name);
});
}).error(function (status) {
alert(status);
});
// if i has declared a value somewhere in your code, then
$scope.selectedVenue = $scope.venues[i];
and in template,
<select ng-model="selectedVenue">
<option value="">Select Venue</option>
<option ng-repeat="venue in venues" ng-value="venue">{{venue}}</option>
</select>
Your html part is ok, just need following modification in controller JS:
access venues like $scope.venues while pushing
assign default selected inside .success because http.get() is async.
Code:
$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
angular.forEach(data, function (item) {
$scope.venues.push(item.Name);
});
$scope.selectedVenue = $scope.venues[i].Name; // i must be declared in your js
}).error(function (status) {
alert(status);
});
I'm trying to create a dynamic form based on an object.
For example: I'd like that generated select boxes will contain options if given, otherwise a factory will fetch them using ajax, something like this:
Markup:
<select ng-repeat="select in selects"
ng-init="options = refactor.options(select)"
ng-options="option in options">
</select>
Controller:
myApp.controller('MyCtrl', function($scope, refactor) {
$scope.refactor = refactor;
$scope.selects = [
{ text: "Country", value="chosen.country", options=["France", "England"] },
{ text: "Gender", value="chosen.gender", options="/gender" }
]
});
Factory:
myApp.factory('refactor', function($scope, $http) {
return {
options: function(select) {
if(typeof(select.options) === 'object') { return select.options };
// otherwise assume select.options is
// a path to fetch options by ajax:
$http.get(select.options).success(function(data) {
select.options = data; // data == ['male', 'female']
});
return []; // placeholder until promise is fulfilled
}
}
})
The data ( $scope.selects ) gets updated as expected, yet the DOM is not, which probably means refactor.options() is not being invoked again in response to the change. I tried to force an update by passing the scope object to the factory and invoke $apply on it, but it doesn't work.
What am I missing?
You need to use ng-init="data = refactor.options(select)" so after getting data from ajax data would be filled up with options then you could use ng-options as instead of ng-options="option in data.options".
Markup
<select ng-repeat="select in selects"
ng-init="data = refactor.options(select)"
ng-options="option in data.options">
</select>
You should try this
myApp.factory('refactor', function($scope, $http) {
return {
options: function(select) {
var menuItems={
options:[]
}
if(typeof(select.options) === 'object'){
menuItems.options=select.options
};
// otherwise assume select.options is
// a path to fetch options by ajax:
$http.get(select.options).success(function(data) {
select.options = data;
menuItems.options=data;// data == ['male', 'female']
});
return menuItems; // placeholder until promise is fulfilled
}
}
});
Then inside your view it should go like this
<select ng-repeat="select in selects"
ng-init="menuItems= refactor.options(select)"
ng-options="option in menuItems.options">
</select>
I am trying to fill an HTML select using angular. I tested the API and got something like:
{"Countries":[{"Id":1,"Name":"Andorra"},{"Id":2,"Name":"France"}]}
The HTML is the following:
<form id="form" method="post" ng-submit="submit">
<select ng-model="model.currentCountry" ng-options="country.Id as country.Name for country in model.countries" ng-controller="CountryController">
<option value="">Country</option>
</select>
</form>
Then I have the JS code:
var application = angular.module('Application', []);
application.service('CountryService', function ($http) {
return {
GetList: function () {
return $http.get('api/countries');
}
}
});
application.controller('CountryController', function CountryController($scope, CountryService) {
alert("Country Controller");
$scope.model = {
currentCountry: '',
countries: []
}
CountryService.GetList()
.success(function (data, status, headers, config) {
$scope.model.countries = $scope.model.countries.concat(data)
})
.error(function (data, status, headers, config) { });
});
Somehow not even the alert in CountryController gets fired.
Any idea what am I missing?
In the success handler in your controller you have....
$scope.model.countries = $scope.model.countries.concat(data)
So you are concatting the Countries object from your example JSON, change that to this:
$scope.model.countries = $scope.model.countries.concat(data.Countries)
This way you are concatenating the actual array of countries to your model.countries.
Edit here is an example plnkr to play with