Hi I have select menu that should not have empty row, this is my code in AngularJS
$scope.GetAllSnimateljiBaseInfo = function () {
$http.get(serviceBase + "GetAllSnimateljiBaseInfo", { timeout: 6000 })
.success(function (response) {
$scope.snimatelji = response;
$scope.snimatelji.splice(0, 0, { "IDsnimatelj": 0, "Ime": "", "Prezime": "" });
$scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0];
})
.error(function (response, status) {
if (status == 401) {
$state.go('/');
}
else {
alert(response.Message);
}
});
};
this is HTML code
<div class="form-group">
<label class="col-lg-3">Snimatelj:</label>
<div class="col-lg-9">
<select class="form-control" ng-options="column as column.Ime +' '+ column.Prezime for column in snimatelji" ng-model="selectedSnimateljInfilterVideoKlip">
<option value=""></option>
</select>
</div>
</div>
But select menu looks like this
As you can see I have two empty menu options instead of one ?
Where is my mistake , any help please ?
Regards
By default one empty row will be there for angular select. The additional empty row is because you have specified
<option value=""></option>
in select tag- remove that.
If you would like to remove the default empty row as well, then set
$scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0]
or use ng-init to achieve the same.
Related
I'm working on a project with angularjs, in which I have three DDLs on a page (HTML), created by "select" using "ng-options", once I selected the three DDLs, when I selected the first DDL, I put in an initial state the other two (select an option), but it does not happen as they remain with the selected value or blank.
On the side of the controllers in .js, in the variable that is linked to each of the ng-model of the ddl, they set the default object ($ scope.selectedActive= $ scope.default_option;), but it does not work
When you change each of the ddls, I see that class ng-dirty and ng-valid class (class = "molecule_list ng-valid ng-dirty") I think that there goes the problem.
This is the code in the HTML
<select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list track by event.value" ng-change="Select_submission(selectedsubmission)"></select>
<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
this is the code in the .js
How id load each DDL
$scope.loadActives = function () {
var dow_user_id = Cookies.get('username');
EndpointsService.GetList_Actives.query({ dow_user_id: dow_user_id }, {}).$promise.then(function (data) {
$scope.Actives_list = data;
//SCP-513
$scope.Actives_list.unshift($scope.default_option);
$scope.selectedActive = $scope.default_option;
}, function (error) {
if (error.data.Message != undefined)
alert(error.data.Message + '\n' + 'Detail: ' + error.data.ExceptionMessage);
else
alert('An error has occurred while loading the Actives list\nDetail: at service "GetList_Actives"');
});
};
This is an example of the code I use to reset value in the ng-model of the ddl.
$scope.Select_molecule = function (selectedActives) {
$scope.selectedActive = $scope.default_option;
$scope.selectedauthority = $scope.default_option;
};
my expectation is that when selecting the first ddl the other two show the option of (Select an option)
The default option cannot be selected in other dropdowns if it doesn't exist as an option to be selected, i've taken your code and made some adjustments to it.
Here is it :
HTML :
<select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list" ng-change="Select_submission(selectedsubmission)"></select>
<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
Controller :
$scope.submissionEvent_list = [];
$scope.authority_list = [];
$scope.loadActives = function () {
$scope.default_option = {
text: 'default'
};
$scope.Actives_list = [
{
text: 'test',
value: 'a value'
},
{
text: 'test2',
value: 'another value'
}
];
$scope.submissionEvent_list.unshift($scope.default_option);
$scope.authority_list.unshift($scope.default_option);
$scope.Actives_list.unshift($scope.default_option);
$scope.selectedActive = $scope.default_option;
};
$scope.loadActives();
$scope.Select_molecule = function (selectedActives) {
$scope.selectedsubmission = $scope.default_option;
$scope.selectedauthority = $scope.default_option;
};
Notice that the other dropdown are filled with the default option but it's not selected until the change is made in the first dropdown.
Hope this will help.
So in my 'edit records' view I have this two dropdrown the first one contains the main category and the second one should contain values based from the main category chosen is the first dropdown. So I implemented an ajax call for this in my view, here is how the dropdown code looks like
<select name="category" id="category" class="dds">
#foreach($mCategories as $lists)
<option value="{{$lists->maincategoryid}}">{{$lists->maincategoryname}}</option>
#endforeach
</select>
<h6>Doc SubClass 1</h6>
<select name="subcategory" id="subcategory" class="dds">
<option value=""></option>
</select>
then I have this in my script to call the ajax function
<script>
$('#category').on('change' , function(e){
console.log(e);
var cat_id = e.target.value;
alert(cat_id);
//ajax
$.getJSON('ajax-subcat?cat_id=' + cat_id , function(data){
console.log(data);
$('#subcategory').empty();
$.each(data, function(index, subcatObj)
{
$('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
});
});
});
</script>
and the code for the ajax call is in my routes and here is how it looks
Route::get('ajax-subcat' ,function()
{
$cat_id = Input::get('cat_id');
$subcategories = DB::table('nsa_subcategory')
->where('maincategoryid' , '=' , $cat_id)
->get();
return Response::json($subcategories);
});
as you can see, in my script I tried to log the data after the $getJSON to check whether or not it went in but I am not getting anything. The thing is I also used this codes in my creating of records so i don't know what my error is now. any ideas? thanks in advance!
I have the following html:
<td>
{%verbatim%}
<select ng-model="s_value" class="form-control">
<option ng-repeat="s in severity_list" ng-value="s.rank" >{{s.rank}}-{{s.generic_value}}</option>
{%endverbatim%}
</select>
</td>
I need to only display the rank(integer value) in my form/table. But its actually getting both the integer and string value into the field. How can I prevent that and only display the integer value? Any idea guys? Thanks in advance
As per going through the answers I have updated my question with the severity_list, Is there any changes because of the edit guys?
$scope.severity_lists = function(){
console.log('Stage1: Loading Sods..... ');
$http.get('{% url "severities" %}').success(
function(data){
$scope.severity_list = data['objects'];
}).error(function(data, status){
console.log('Stage1: Internal error while loading initial data:'+status );
});
};
$scope.severity_lists();
Editted to display the problem to SK:
You should use ng-options really
edit: read your other comment and realised you might want this
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.severity_list = [{
rank: 1,
generic_value: 'severe'
}, {
rank: 2,
generic_value: 'not so bad'
}];
$scope.initialiseOptions = function() {
for (i = 0; i < $scope.severity_list.length; i++) {
$scope.severity_list[i].Text = $scope.severity_list[i].rank + '-' + $scope.severity_list[i].generic_value;
}
}
$scope.initialiseOptions();
$scope.dropdownChanged = function() {
if($scope.s_value){
$scope.initialiseOptions(); // reset our previous selections
$scope.s_value.Text = $scope.s_value.rank;// Set our display to only rank after its chosen
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl">
<select ng-model="s_value" class="form-control" ng-options="option as option.Text for option in severity_list" ng-change="dropdownChanged()">
</select>
Selected:{{s_value}}
</body>
</html>
After reviewing the comments, I can suggest something like the following?
It's not brilliant but it demonstrates an approach, here is the fiddle:
http://jsfiddle.net/LXAt7/573/
<select ng-model="s_value" class="form-control" ng-hide="!editMode" ng-options="s.rank as (s.rank + ' - ' + s.generic_value) for s in severity_list" ng-change="valueChanged()">
</select>
<input type="text" ng-model="s_value" ng-show="!editMode" ng-click="changeToEditMode()" />
It's worth noting that using ng-options is a cleaner approach. - https://docs.angularjs.org/api/ng/directive/ngOptions
I'm not familiar with this verbatim tag, but it does seem out of position, should it not be below the </select>?
You can try something like this. I've tried to keep it simple:
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
$scope.severity_list = [{
rank: 1,
generic_value: "High"
}, {
rank: 2,
generic_value: "Mid"
}, {
rank: 3,
generic_value: "Low"
}];
$scope.getVal = function(ind) {
if ($scope.selectedValue != undefined && $scope.selectedValue == $scope.severity_list[ind].rank) {
$scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank;
} else {
$scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank + '-' + $scope.severity_list[ind].generic_value;
}
return $scope.severity_list[ind].viewValue;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<select ng-model="selectedValue">
<option value="">--Select--</option>
<option ng-repeat="s in severity_list" value="{{s.rank}}">
{{ getVal($index) }}</option>
</select>
<span ng-show="selectedValue">Selected Value: {{ selectedValue }} </span>
</div>
</div>
JsFiddle: https://jsfiddle.net/sktajbir/6fmvsaf0/21/
Here selected value will be always rank because of this code in the option tag:
value="{{s.rank}}"
If you want full object as selected object then you can try:
value="{{s}}"
I hope this will help you to think further. Thanks.
I have a little issue with a HTML select with AngularJS. When I do a petition to my API I get one of the values as an integer, but when I try to autofill a select with it I can't set de "value" correctly.
In this picture you can se what the HTML is receiving and the values that I want to set
Are there any way to cast this value?
Thanks in advance :)
EDITED:
The controller to get customer data and fill the form
.controller('CustomerDetailCtrl', ['Customer', '$scope', '$sessionStorage', '$stateParams', '$ionicPopup', function (Customer, $scope, $sessionStorage, $stateParams, $ionicPopup) {
if ($sessionStorage.auth) {
Customer.get({data: $stateParams.customerId + '_' + $sessionStorage.user_id}).$promise.then(function (data) {
if (data.response && $sessionStorage.role === 1) {
$scope.customer = data.response[0];
if (data.history) {
$scope.histories = data.history;
}
} else {
console.log('Error de accesso...');
}
})
}
$scope.addTask = function (customer) {
alert('add task!');
}
$scope.deleteTask = function (customer, history) {
alert('delete task!');
}
}])
The form:
<label class="item item-input item-select">
<div class="input-label">
Cliente avisado?
</div>
<select name="informed" ng-model="customer.informed" required>
<option value="0">NO</option>
<option value="1">SI</option>
</select>
</label>
And here a picture of the data from de API:
I know that you've already received an answer on this, but I wanted to show you one other potential option that doesn't involve having to change your data from an int to string. If you define the options for your select in your controller (or in a service if this will be used in multiple different places throughout your app) then you can take advantage of ng-options and its ability to use a value other than a string.
Here's an example (obviously I've hardcoded some things and put this all in a single module - not something you'd do in a real app).
JS:
angular.module('app', [])
.controller('ctrl', function($scope){
// select options (if these are common maybe store them in a service
// so you can share them in many controllers without duplicating the code)
$scope.selectOptions = [
{
text: 'NO',
value: 0
},
{
text: 'SI',
value: 1
}];
// sample data
$scope.customer = {
address: 'San Rosendo 11',
date: '2016-03-16T16:19:13+0100',
email: 'Montes',
equipment: 'PC',
id: 262,
informed: 1,
lastName: 'Montes',
location: 'Tienda',
name: 'Juanma',
notes: '',
pass: 'no tiene',
phone: '900112233',
price: '0',
status: 'Pendiente',
tasks: 'dfsdf'
};
});
HTML:
<div ng-app='app' ng-controller='ctrl'>
<select ng-model='customer.informed' ng-options='option.value as option.text for option in selectOptions'></select>
</div>
jsFiddle
Define a default value somewhere in your controller: $scope.customer.informed = "NO";
I have a SELECT LIST MENU containing products and on this menu i use onChangeevent. when you select any product, it load company name of that product.Below is the function which i used,
function getcompany(element) {
var strURL="getcompany.php?product="+element.value;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
element.parentNode.parentNode.getElementsByClassName('companydiv')[0].innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
And my html code is,
<select name="product" onChange="getcompany(this)">
<option value="1" >Product1</option>
<option value="2" >Product2</option>
</select>
<div class="companydiv">Product result will be shown here</div>
The above code work but now i want to use jquery autocomplete instead of SELECT LIST MENU because my product list containing more then 1000 products.
My Autocomplete code is,but i dont know where i'm wrong
<input name="product" id="product" type="text" onkeyup="getcompany(this)" />
Some other answers i already checked but i'm not satisfied with anyone, some of them are below
jQuery AutoComplete Trigger Change Event
Jquery Autocomplete onChange event
http://forum.jquery.com/topic/autocomplete-and-change-event
I could not find your error here, however I could make what you are trying to do. I used jquery here. jsFiddle