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.
Related
Please help me change path of the code so that the drop-down list changes when adding new elements to the array. I’ve been fighting this problem for half a day.Now I have to add manually each time. I tried to find the answer at SO, but all my attempts to change part of the code turned out to be a failure. It seems to me that I still do not understand the logic of HTML Thank you in advance!
js code part:
t.DropdownList = (values); // loading every time before html starts
HTML code part:
<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : grey ; font-family :
arial sans-serif ;font-size : 10pt }
o { color : red ; font-size : 14pt }
r { color : gray ; font-size : 14pt }
</style>
<h1>Передача клиента:</h1> <br>
<h1><?= ClientName ?></h1> <br>
<r>Адрес:</r>
<r><?= ClientAdress ?></r> <br>
<r>Менеджер клиента:</r>
<o><?= Manager ?></o> <br>
<br>
<form id='myForm'>
<label for="managers-choice">Выберите менеджера для передачи клиента:</label>
<input list="managers" id="dropdownlist" name="dropdownlist" />
<input
onclick="google.script.run.Message02(document.getElementById('myForm'));myFuncti on();this.disabled=true" type="button" value="Передать" />
</form>
<datalist id="managers">
<option value =<?=DropdownList[0]?> > // in this place I need help, because if the next load the array is shorter, then I will get an undefined result.
<option value =<?=DropdownList[1]?> >
<option value =<?=DropdownList[2]?> >
<option value =<?=DropdownList[3]?> >
<option value =<?=DropdownList[4]?> >
<option value =<?=DropdownList[5]?> >
</datalist>
<script>
$('#dropdownlist').datepicker({ dateFormat: 'dd.mm.yy' });
function myFunction() {
var b = document.getElementById('result');
b.innerHTML = 'Менеджер выбран.';
document.getElementById('dropdownlist').disabled = 'disabled';
//alert('The output has been modified');
return;
}
</script>
<body>
<div id="result">Вы еще не выбрали менеджера.</div>
</body>
</div>
Here's how I do it:
JavaScript:
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
grObj=rObj;
updateSelect(grObj.mnA);
})
.getRecipeList1();//google apps script function on server
});
function updateSelect(vA,id){
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],i);
}
}
So it always gets the latest list every time the page is loaded.
I'm making a sidebar page for an add-on in Google Sheets.
The user will select a topic from a select menu (drop down), which will then change the inner html of div to display a different help topic.
So far the variable passed along is what gets displayed. I want the contents of the variable to be displayed as html.
I was able to make this work from text links, but they took up too much space in the sidebar, so I went to a select menu.
I made a simpler sample than my actual help sidebar so there would be less code to look at:
<!DOCTYPE html>
<html>
<body>
<p>Select a choice from the list.</p>
<select id="topic" onchange="showContent(this.value)">
<option value="choice1">This one</option>
<option value="choice2">the next one</option>
<option value="choice3">Yet another</option>
</select>
<p>When you select a choice, the output should change based on the value of the variable passed.</p>
<p id="helpContent">Results go here</p>
<script>
//VARS
var choice1 = '<ul><li>This is the first choice<li></ul>';
var choice2 = '<ul><li>This is the second choice<li></ul>';
var choice3 = '<ul><li>This is the, like, third choice<li></ul>';
function showContent(topic) {
document.getElementById("helpContent").innerHTML = topic;
}
</script>
</body>
</html>
Use a data structure to represent your elements, and then create them accordingly
<!DOCTYPE html>
<html>
<body>
<p>Select a choice from the list.</p>
<select id="topic" onchange="showContent(this.value)">
<option value="choice1">This one</option>
<option value="choice2">the next one</option>
<option value="choice3">Yet another</option>
</select>
<p>When you select a choice, the output should change based on the value of the variable passed.</p>
<p id="helpContent">Results go here</p>
<script>
var choices = {
"choice1": {
list: ["item1", "item2", "item3"]
},
"choice2": {
list: ["item1"]
},
"choice3": {
list: ["item3"]
},
}
function showContent(topic) {
var currentChoice = choices[topic];
if (currentChoice == null)
return alert("Invalid choice");
var newList = document.createElement('ul');
for (var i = 0; i < currentChoice.list.length; i++) {
var newListItem = document.createElement('li');
newListItem.innerText = currentChoice.list[i];
newList.appendChild(newListItem);
}
var sidebarContainer = document.getElementById("helpContent");
sidebarContainer.innerHTML = "";
sidebarContainer.appendChild(newList);
}
window.onload = function() {
showContent("choice1");
}
</script>
</body>
</html>
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.
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 form that contains 3 checkboxes: "Select All", "Option 1", and "Option 2".
<form id="selectionForm">
<input type="checkbox" ng-model="selectAll" >Select all
<br>
<input type="checkbox" ng-checked="selectAll" checked>Option 1
<br>
<input type="checkbox" ng-checked="selectAll">Option 2
</form>
On the initial page load I want only Option 1 to be checked. And then if the Select All checkbox gets checked it should automatically check Option 1 and Option 2 so all are selected.
The problem is on the initial page load the ng-checked="selectAll" gets evaluated which overrides my attempt to initially check only Option 1 (selectAll = false initially), so nothing is selected.
This seems like a simple problem to solve, but I can't figure out a solution... Thanks in advance for any insights or advice!
Another way to go about it is to use a model for the options, set default selection in the model and have your controller handle the logic of doing select all.
angular.module("app", []).controller("ctrl", function($scope){
$scope.options = [
{value:'Option1', selected:true},
{value:'Option2', selected:false}
];
$scope.toggleAll = function() {
var toggleStatus = !$scope.isAllSelected;
angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });
}
$scope.optionToggled = function(){
$scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script>
<div ng-app="app" ng-controller="ctrl">
<form id="selectionForm">
<input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all
<br>
<div ng-repeat = "option in options">
<input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}
</div>
</form>
{{options}}
</div>
Try this:
<form id="selectionForm">
<input type="checkbox" ng-model="selectAll" >Select all
<br>
<input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
<br>
<input type="checkbox" ng-checked="selectAll">Option 2
</form>
I like to use an ng-repeat for clarity on showing what you're selecting/un-selecting, basically you end up with a nice little object to base it all on, and adding to it is just easier.
Here's a Plunker
*Also notice how you can achieve allSelected? with a loop func and not a ton of html, and I'm sure this can be done with less spaghetti but it works *
app.controller('MainCtrl', function($scope) {
$scope.allSelected = false;
$scope.checkboxes = [{label: 'Option 1',checked: true}, {label: 'Option 2'}}}];
$scope.cbChecked = function(){
$scope.allSelected = true;
angular.forEach($scope.checkboxes, function(v, k) {
if(!v.checked){
$scope.allSelected = false;
}
});
}
$scope.toggleAll = function() {
var bool = true;
if ($scope.allSelected) {
bool = false;
}
angular.forEach($scope.checkboxes, function(v, k) {
v.checked = !bool;
$scope.allSelected = !bool;
});
}
});