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);
});
}
Related
You can see my code below.
var app = angular.module("appX", []);
console.log(app);
app.controller("orderController", function($scope) {
$scope.printOption = function(option) {
var split = option.split('_');
$scope.quantity = split[0];
$scope.unitPrice = split[1];
$scope.total = split[0] * split[1];
console.log($scope.total);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div ng-app="appX" ng-controller="orderController">
<div >
<form action="" method="POST" role="form">
<select ng-name="optionOne" class="form-control" ng-change="printOption(optionOne)" ng-model="optionOne">
<option value="">Select</option>
<option value="1_12">1 for $12</option>
<option value="2_22">2 for $22</option>
<option value="3_29">3 for $29</option>
<option value="4_35">4 for $35</option>
<option value="5_40">5 for $40</option>
<option value="6_45">6 for $45</option>
<option value="7_50">7 for $50</option>
<option value="8_55">8 for $55</option>
<option value="9_60">9 for $60</option>
</select>
</form>
</div>
<div class="col" ng-show="total>0">Total for 8x10 Team and 1 - Individual Photo = {{total | currency}}</div>
</div>
New to Angular.js I have a form with a number of dropdowns. Each one passes a selected value to my Angular Controller. I'm able to parse the data and return some of the necessary information back to the form. however, I have a number of dropdowns in the form and I want to only provide the appropriate total value of the selection for each dropdown.
There is a library called console.js which is showing the console output in the DOM in the JSFiddle you provided. You can just comment out all the console.log() as in the below example or remove the library!, Refer the below fiddle.
var app = angular.module("appX", []);
//console.log(app);
app.controller("orderController", function($scope) {
$scope.printOption = function(option) {
var split = option.split('_');
$scope.quantity = split[0];
$scope.unitPrice = split[1];
$scope.total = split[0] * split[1];
//console.log($scope.total);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appX" ng-controller="orderController">
<div >
<form action="" method="POST" role="form">
<select ng-name="optionOne" class="form-control" ng-change="printOption(optionOne)" ng-model="optionOne">
<option value="">Select</option>
<option value="1_12">1 for $12</option>
<option value="2_22">2 for $22</option>
<option value="3_29">3 for $29</option>
<option value="4_35">4 for $35</option>
<option value="5_40">5 for $40</option>
<option value="6_45">6 for $45</option>
<option value="7_50">7 for $50</option>
<option value="8_55">8 for $55</option>
<option value="9_60">9 for $60</option>
</select>
</form>
</div>
<div class="col" ng-show="total>0">Total for 8x10 Team and 1 - Individual Photo = {{total | currency}}</div>
</div>
I am new to angular and I am stuck...
I want to create a dropdown as shown in this image where the placeholder in the textbox depends on the selected option from the dropdown.
My html is
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
My controller is defined as:
var companyInfo = angular.module('companyInfo', []);
companyInfo.controller('searchExample', ['$scope', '$http',function($scope, $http){
$scope.searchCriteria = ['Name', 'Employee Id', 'Designation', 'Email','Phone No']
$http.get("data/data.json").then(function(data){
$scope.employeeDetails= data.data;
});
$scope.searchInTable = function(searchName){
$scope.searchVal = searchName;
}
}]);
You can try this data-ng-change binds the event on change of select with the specified function
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith" data-ng-change="search()">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
and in your controller
$scope.search = function(){
$scope.searchName = $scope.searchWith;
}
<body ng-controller="myController">
<select ng-change="getData(currentSelected)" class="form-control" id="selection" ng-model="currentSelected" ng-options="selection as selection for selection in data">
<option value="" selected>Select the bankname</option>
</select>
<select ng-change="getData(currentSelectedstate)" class="form-control" id="selection" ng-model="currentSelectedstate" ng-options="my.state as my.state for my in newdata">
<option value="" selected>Select the state</option>
</select>
<select ng-change="getData1(currentSelecteddistrict)" class="form-control" id="selection" ng-model="currentSelecteddistrict" ng-options="my.district as my.district for my in data1">
<option value="" selected>Select the district</option>
</select>
</body>
JS code
<script>
var app=angular.module("mainApp",[]);
app.controller("myController", ["$scope", "$http",function ($scope,$http){
$http.get("company.in/ifsc/banklist").then(function(response){
$scope.data=response.data[0].data;
});
$scope.getData = function(name){
$http.get("company.in/ifsc/state/" +name).then(function(response) {
scope.newdata = response.data;
});
}
$scope.getData1= function(name1){
$http.get("company.in/ifsc/district/"+banklist+, +name).then(function(response) {
$scope.data1 = response.newdata;
});
}
}]);
</script>
First two API are working fine, When i select particular state in second drop down its not taking the value , How to append fetched bankname and state to the third API? so that i get the list of district in the third drop down....,I'm getting state value as null once i select the state..
Anyone please help how to append the third API?
Thank you
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
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.