I want to build a category filter in my angular application. I have a select option dropdown. If I select an other category I want to load an other http request. Each category have a different URL to call.
My controller:
.controller('activiteitenCtrl', function($scope, $http) {
if(selectCategory == 1){
$scope.groep = "http://www.example.com/?id=1";
}
if(selectCategory == 2){
$scope.groep = "http://www.example.com/?id=2";
}
else{
$scope.groep = "http://www.example.com/?id=3";
}
$scope.loadData = function () {
$http.get($scope.groep, {cache:false})
.success(function(data) {$scope.activiteiten = data.posts; });
}
$scope.loadData();
})
My template:
<select>
<option value="0">Recent</option>
<option value="1">Groep 1</option>
<option value="2">Groep 2</option>
<option value="3">Groep 3</option>
<option value="4">Groep 4</option>
<option value="5">Groep 5</option>
<option value="6">Groep 6</option>
<option value="7">Groep 7</option>
<option value="8">Groep 8</option>
</select>
I tried ng click but that's not working. how i get the value of the select menu in the controller and reload the data with the loadData() function? so that the items form te selected category appear in the view?
Your view should be something like this:
<select ng-model="selectCategory" ng-change="selected()">
<option value="0">Recent</option>
<option value="1">Groep 1</option>
<option value="2">Groep 2</option>
<option value="3">Groep 3</option>
<option value="4">Groep 4</option>
<option value="5">Groep 5</option>
<option value="6">Groep 6</option>
<option value="7">Groep 7</option>
<option value="8">Groep 8</option>
</select>
And in your controller you need to create the callback function that is executed when the value of the select box changes:
$scope.selected = function() {
if($scope.selectCategory == "1"){
$scope.groep = "http://www.example.com/?id=1";
}
if($scope.selectCategory == "2"){
$scope.groep = "http://www.example.com/?id=2";
}
else{
$scope.groep = "http://www.example.com/?id=3";
}
$scope.loadData();
}
Example: http://plnkr.co/edit/4pBvvL4MUn09HrjwSPtC?p=preview
Related
I have a select box which bind the data from the database.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>
Below is the loadCountries function
$scope.loadCountries = function () {
var resultList = mainService.loadCountries();
resultList.then(function (response) {
$scope.countries = response.data;
$scope.selectedCountry = $scope.countries[0];
});
}
Also here is the loadcountires code in service
function mainService($http) {
this.loadCountries = function () {
var result = $http({
method: 'GET',
url: '/API/Country/Countries'
});
return result;
}
}
When I checked countries list, it is populating succesfully, but not binding to ng-options in the select box.
Can anyone help me with this please !!
Change ng-options like this and try.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country as country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>
I used ng-init inside Bootstrap model but it not initiating
<select class="form-control" ng-init="loadBankNames()">
<option value="">Select Bank</option>
<option ng-repeat="b in bank_list" value="{{b.bank_name}}">{{b.bank_name}}
</option>
</select>
$scope.loadBankNames = function(){
dmtService.getBankNames()
.then(function(data){
$scope.bank_list = data;
console.log($scope.bank_list);
});
}
I have three dropdowns to set unique orders value.
Html Code:-
<form name="submitForm" ng-submit="save(submitForm.$valid)" novalidate="novalidate">
<div class="form-group">
<label>Unique order:</label>
<label>First Step</label>
<select ng-model="myOrder.step[0]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>First Step</label>
<select ng-model="myOrder.step[1]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>First Step</label>
<select ng-model="myOrder.step[2]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<button type="submit" class="btn btn-success">Save</button>
</form>
On these dropdowns I applied a filter.
Directive Code:-
return {
restrict: 'EA',
scope: {},
controller: function ($scope) {
$scope.myOrder = {};
$scope.myOrder.step = [];
},
link: function (scope, el, attrs) {
scope.checked = function() {
if (_.uniq(scope.myOrder.step).length !== scope.myOrder.step.length) {
scope.notify("error", "Please set unique order value");
}
};
scope.save = function(isValid) {
if (isValid) {
if (!scope.values) {
ApiServices.updateOrderSet(scope.myOrder).then(function (response) {
scope.notify('success', response.data);
scope.values = false;
});
} else {
ApiServices.updateAddSet(scope.myOrder).then(function (response) {
scope.notify('success', response.data);
});
}
} else {
scope.notify('error', 'There are errors on the form');
}
};
},
What I want is if user set same values on dropdowns i.e., not unique ,then on save button it notifies scope.notify("error", "Please set unique order value"); also the form doesn't submit. Please note that these are not required fields.I tried $submitted too but doesn't work.Can anyone tell me what should I do here to make it work.
I am developing Angular JS application and I want to make a select option like below.
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="1" selected="selected">Active</option>
<option value="0" selected="">Inactive</option>
</select>
I want to make active when the ng-model rc.status becomes 1 and inactive when 0.
How can I do that without doing ng-repeat.
Because I generating this view from laravel and binding the html with Angular js
Here is example that select dropdown value as per rc.status
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="--Select--">--Select--</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<br><br>
<div>Status : {{rc.status}}</div>
</div>
This might help getting the select changed.
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="1" ng-selected="rc.status == 1">Active</option>
<option value="0" ng-selected="rc.status == 0">Inactive</option>
</select>
Try to use a controller to do that :
For exmple :
OneCtrl init the status at 1 and watch them to change the select item
app.controller('OneCtrl', function($scope) {
$scope.status = 1;
$scope.$watch('status', function () {
if($scope.status == 1){
$scope.statusSelected= '0';
}if($scope.status == 2){
$scope.statusSelected= '1';
}
});
// Change status value
$scope.status1 = function () {
$scope.status = 1;
}
$scope.status2 = function () {
$scope.status = 2;
}
});
view :
<select name="" ng-model="statusSelected">
<option value="0">Active</option>
<option value="1">Inactive</option>
</select> <br>
<button ng-click="status1()">Status 1</button>
<button ng-click="status2()">Status 2</button>
Hope that helps.
Trying to get the options in the select field to use the IDs in an array as values.
HTML looks like this:
<select class="form-control" name="activitySelector"
ng-model="item"
ng-change="changeActivity()"
ng-options="activity.id as activity.value for activity in activities">
<option value="">Nothing selected</option>
</select>
Controller:
angular.module('myApp')
.controller('ActivityCtrl', function ($scope, $rootScope) {
$scope.activities = [
{"id":"54be7f8","value":"Add New Activity"},
{"id":"5407968","value":"Activity 1"}
];
$scope.item = "";
$scope.changeActivity = function() {
console.log($scope.item); //prints undefined
}
});
Generated HTML looks like this:
<select ng-options="activity.id as activity.value for activity in activities" ng-change="changeActivity()" ng-model="item" class="form-control ng-pristine ng-valid">
<option value="" class="">Nothing selected</option>
<option value="0">Add New Activity</option>
<option value="1">Activity 1</option>
</select>
Questions that I have so far:
1- Why $scope.item prints undefined?
2- Why the options would use a consecutive value instead of the ID provided?
You can modify your code as follows in order for your html to render as you wish:
<select class="form-control" name="activitySelector"
ng-model="item"
ng-change="changeActivity()"
ng-options="activity.value for activity in activities track by activity.id">
<option value="">Nothing selected</option>
</select>
And in your controller now, you should change as follows:
$scope.changeActivity = function() {
console.log($scope.item.id);
console.log($scope.item.value);
}
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.