<select class="form-control input-sm text-uppercase" id="ddlUsers" data-ng -model="UserName" >
<option data-ng-repeat="List in Users" value="{{List.Value}}" ng-options="">{{List.Name}}
</option>
</select>
controller code
var Users = [], filterCondition=[];
$(res).find('NewDataSet Table4').each(function () {
Users.push({
Value: $(this).find('UserId').text(),
Name: $(this).find('Name').text()
});
});
$scope.Users = Users;
$scope.UserName = $scope.Users[0].Value;
i want to show the select text based on the value equal to below code
filterCondition.push({ operator: localStorage.getItem('UserId') });
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 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;
}
One of the ng-models gives null value. When I click the button with the function setNewRecord the parameter selectedDocument is null. The first two parameters are correct. The javascript code is added as well.
<form name="myForm" >
<div>
<select ng-model="selectedCompany">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selectedDocument" ng-click="getTypes(selectedCompany, enteredCustomer)">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord(selectedCompany, enteredCustomer,selectedDocument)"/>
Java Script
myApp.service('getDocTypesService', ['$http', '$q', function($http, $q) {
var allSettings = null;
this.getDocTypes = function(compName, custName) {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetDocTypes', {
companyName: compName,
customerName: custName
})
.then(function(response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);
myApp.controller('myController', ['$scope', 'getDocTypesService',
function($scope, getDocTypesService) {
$scope.getTypes = function(comp, cust) {
getDocTypesService.getDocTypes(comp, cust).then(function(value) {
$scope.docSettings = value
});
};
}
]);
Try replacing the select for selectedDocument with this:
<select ng-model="selectedDocument"
ng-click="getTypes(selectedCompany, enteredCustomer)"
ng-options="docSetting.Doc_Type for docSetting in docSettings track by docSetting.Doc_Type">
</select>
I am getting the response as below and I would like to adjust those in select option tag. How can I set those please suggest the same
[null,"a","b","c ","d"]
My code is like
$http.get('v1/sport').success(function(data) {
$scope.sports = [];
//$scope.sports = data.data;
angular.forEach(data.data, function(value, key) {
$scope.sports[value.sport_id] = value.name;
});
});
In view
<select name="teamSport"
ng-model="player.sport_id"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
Using ng-repeat and ng-model like this
<select ng-model='value'>
<option ng-repeat='option in options'>
{{option}}
</option>
</select>
$http.get('v1/sport') .success(function (data) { $scope.sports = []; angular.forEach(data.data, function(value, key){ $scope.sports[value.sport_id] = value.name; }); });
$http.get('v1/selectedSport') .success(function (data) { $scope.selectedSport = data; });
And the view
<select
ng-model="selectedSport"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports">
</select>
You can directly use the data without converting it using forEach.
Here is the script which will render the dropdown using the data you gave in the comment [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}]
You can set the selected in the $scope.selected variable.
var myApp = angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.sports = [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}];
$scope.selected = $scope.sports[2];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
{{selected}}
<select name="teamSport"
ng-model="selected"
ng-options="sport as sport.name for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
</div>
</div>
How do I get user selected multiple tags with angularjs, taking in consideration the following snippet
Markup
<input type="hidden" ui-select2="select2Options" ng-model="list_of_string" style="width:100%" />
<small>hint: start to type with a</small>
Angular scope
$scope.list_of_string = [];
$scope.select2Options = {
data: function() {
api.categories().then(function(response) {
$scope.data = response;
});
return {'results': $scope.data};
},
'multiple': true,
formatResult: function(data) {
return data.text;
},
formatSelection: function(data) {
return data.text;
}
}
Try changing your <input .../> to <select> </select>
like
<select multiple ui-select2 ng-model="list_of_string" style="width: 100%">
<option ng-repeat="option in data">{{option.text}}</option>
</select>