I have the Drop down list which is populated from a GetJSON call as shown below
VIEW
#{
var NoticeFilter =(X.Models.Y.Z.NoticesEntity) ViewData["NoticeFilter"];
}
<div class="form-group">
<label>Field Office</label>
<select data-bind="options: FieldOffice, value: selectedFieldOffice, optionsCaption:'Choose...', optionsValue:'FieldOfficeID', optionsText:'Name'">
#if(NoticeFilter!=null)
{
<option value="#NoticeFilter.FieldOfficeID" selected></option>
}
</select>
</div>
When I direct to this page and send data into the NoticeFilter I want the value in drop-down pre-selected with the value in Noticefilter among the other values .How do I achieve this
I was wondering if there is way in razor HTML where I can set a default value to Drop-Down after the data-binding from KO JS
Have you tried this?
<script>
var str = #Html.Raw(Json.Encode(ViewData["Text"]));
</script>
WORKING
After few attempts I found this as one way to access the ViewData or ViewBag in my JS
I used the KO JS optionsAfterRender as below
VIEW
<select data-bind="options: SubType, value: selectedSubType, optionsValue:'SubTypeID', optionsText:'SubTypeDescription',optionsAfterRender:function(){setOptionST(#Noticefilter .SubTypeID);}"></select>
JS
In the view model
self.setOptionST = function (x) {
//here we can do whatever is intended to in my case to set the initial value in dropdown
self.selectedSubType(x);
};
Related
So I'm having issues dinamically setting the values of a multiselect field in selectize
<select name="senalV" id="senalV" >
<option hidden value="">Señal Vertical </option>
<option value="cartel">Cartel</option>
<option value="poste">Poste</option>
<option value="lineas">Lineas</option>
<option value="lineas_y_recorrido">Linea y Recorrido</option>
<option value="no_posee">No posee</option>
</select>
$(document).ready(function () {
var $selectz = $('#senalV').selectize({
sortField: 'text',
maxItems: 4,
});
});
If I do it like this:
$selectz[0].selectize.setValue(["cartel","lineas","poste","lineas_y_recorrido"]);
It does works but I'm trying to edit a register and update the database
So i wanna do it dinamically and it should be like this? but it does not work
$selectz[0].selectize.setValue([valueSV]);
var valueSV = <%- JSON.stringify( par.senal_vertical ) %>;
If i do a console.log on "valueSV" it does bring me = "cartel","lineas","poste","lineas_y_recorrido" which the exact string I use in the static version that does work but for some reason does not work when i do it like this (also this value is actually an array that I transform in the back end to get it like this in the front. this line of code is also placed before the "set values" but i put it here so i could explain myself better
I have a code in asp that generates the list of users I need, through a ViewBag.
the list loads normally, however, when selecting multiple values, only the first value (ID) is written to SQL.
in the html code, I noticed that only the first value is <option selected="selected"...>
I need all my data selected (selectpicker) or (select2), to be written in my SQL field and returned on the screen as "tags" for the case of (select2) or selected in (selectpicker).
HTML
<div class="form-group">
<label asp-for="SCusernominal" class="control-label"></label><br />
<select asp-for="SCusernominal" asp-items="ViewBag.USER_FINAL" class="form-control selectpicker" multiple="multiple" id="SCusernominal" data-actions-box="true" data-size="5" data-width="100%"></select>
</div>
First use Selectpicker then insert a property in your model to pass selected item to the controller to save in your database, like this:
public List<int> SelectedGroup{get;set;}
and in your view :
#Html.ListBoxFor(model => model.SelectedGroup, this.ViewBag.Groups as SelectList, new { #class = "form-control"})
<script>
$('#selectGroup').selectpicker(
{
width: '100%',
title: '- [select more..] -',
size: 6,
});
</script>
I have this dropdown menu:
<select class="form-control" name="timeSlot" ng-model="user.dateTimeSlot" ng-change="dateTimeChanged(user.dateTimeSlot)" ng-blur="blur29=true" required style="float: none; margin: 0 auto;">
<option ng-repeat="x in dateTimeSlots"
ng-disabled="x.taken"
ng-value="x.timeSlot">
{{x.dateSlot}}
</option>
</select>
And I am trying to get the selected index on the ng-change. However it always returns -1
$scope.dateTimeChanged = function (selectedItem) {
var index = $scope.dateTimeSlots.indexOf(selectedItem);
console.log(index);
}
Why is it always returning -1....here is a screenshot of my data:
What I am trying to do is get that id value on the selected item. What am I doing wrong?
Well, it is a little uncertain what you really want. Seems to me you are trying to run on two horses :) You bind the ng-model to timeSlot, but what you really want is the index so you easier can grab the object? What about binding the option values direct to the indexes? :
<option ng-repeat="x in dateTimeSlots"
ng-disabled="x.taken"
ng-value="{{ $index }}"> <!-- here -->
{{x.dateSlot}}
</option>
now user.dateTimeSlot will be 0,1,2,3 and so on (when an option is selected). In the change method you now receive the index
$scope.dateTimeChanged = function(selectedItem) {
console.log($scope.dateTimeSlots[selectedItem]) //<-- the selected object by index
}
I'm trying to display a JSON response in a drop down list in the HTMl using Angular JS.
I'm trying to call "short name" in the agency drop down list in html.
Any ideas. Thanks in advance.
My JSON code
[{"id":1,"agencyCode":"006","agencyDescription":"null","shortName":"NJTA","cscId":1,"iagAgencyTypeId":4,"comments":"null","whoCreated":"admin","createdDate":"2016-06-13","whoUpdated":"admin","updatedDate":"2016-06-13"}]
HTML CODE
<div class="dashboard_searcharea">
<div class="col-md-3" ng-repeat="shortname in agencies"> Agency :
<select class="text_field_style smallfield">
<option value="shortname"> agencies: {{agencies.shortname}} </option>
</select>
</div>
<div class="col-md-3"> Events :
<select class="text_field_style smallfield">
</select>
</div>
Angular JS
Dashboard.controller('homeController',homeController);
function homeController($scope,$location,$http) {
$scope.dt = new Date();
$scope.popup1 = {
opened: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$http.get("http://localhost:8080/EtbosAdmin/agencies")
.success(function(response) {
$scope.metrics=response.series[0].shortname;
To achieve your expected result please follow below steps
1.In Iteration use different name then the key value to avoid confusion ..for testing i have used JSON and variable x in agencies.
2.Key value is shortName , so we need to get value by x.shortName.
I have used the JSON in $scope.agencies for testing
<div class="dashboard_searcharea">
<div class="col-md-3" ng-repeat="x in agencies"> Agency :
<select class="text_field_style smallfield">
<option value="shortname"> agencies: {{x.shortName}} </option>
</select>
Codepen URL -http://codepen.io/nagasai/pen/EyKqMB which i have created for reference
I have been working on this way too long trying to figure it out.
<select class="form-control"
ng-model="question.sel"
ng-change="updateDropDownQuestion(question,question.sel)">
<option ng-repeat="answer in question.answers" ng-disabled="answer.notAnOption" value="{{answer.acode}}">{{answer.name}}</option>
<option style="display:none" value="NONE">NONE</option>
</select>
Then in my js file:
$scope.updateDropDownQuestion = function(question, answer) {
reset(question.code)
$scope.formData["SOLE/SELECTED_QUESTION"] = question.code
$scope.formData["SOLE/SELECTED_ANSWER"] = answer
$scope.formData[question.code+"/"+answer] = true
var questions = $scope.product.questions
for(i=0; i <questions.length;i++){
if(questions[i].code == question.code){
questions[i].sel = answer
break;
}
}
$scope.refresh()
};
the $scope.refresh() is where it changes back. This renders the screen.
no matter what I do it seems to render the previous state and not the current state of the drop down. This is because I am repainting the screen after the drop down changes.
It seems as though the when the screen repaints it is taking the original value first.
Any thoughts on how I can get the value to "stick" once set?
Do I need to fire some event afterwards?
From Angular official site:
Note: ngModel compares by reference, not value. This is important when binding to an array of objects. You might find this helpful to set the default values of your drop down. See an example below.
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
// Although this object has the same properties as the one in $scope.options,
// Angular considers them different because it compares based on reference
$scope.incorrectlySelected = { label: 'two', value: 2 };
// Here we are referencing the same object, so Angular inits the select box correctly
$scope.correctlySelected = $scope.options[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp">
<div ng-controller="DemoController">
<div>
<h2>Incorrect</h2>
<p>We might expect the select box to be initialized to "two," but it isn't because these are two different objects.</p>
<select ng-model="incorrectlySelected"
ng-options="opt as opt.label for opt in options">
</select>
The value selected is {{ incorrectlySelected.value }}.
</div>
<div>
<h2>Correct</h2>
<p>Here we are referencing the same object in <code>$scope.correctlySelected</code> as in <code>$scope.options</code>, so the select box is initialized correctly.</p>
<select ng-model="correctlySelected"
ng-options="opt as opt.label for opt in options">
</select>
The value selected is {{ correctlySelected.value }}.
</div>
</div>
</body>
Try using ng-options to render option elements.
Something along these lines:
<select class="form-control"
ng-model="question.sel"
ng-change="updateDropDownQuestion(question,question.sel)"
ng-options="answer.acode as answer.name in question.answers">
</select>
It also depends on what updateDropDownQuestion is doing, can you provide that?