Default value pre-selected in select box with ng-options - sql

I am trying to get default value selected (from database) in my select box using ng-options.
My view
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="p.procid">
<option value="">-- choose an option --</option>
</select>
where p.procid is a value received from the database.
My data
procid procname time
1 MyProcess 2018-05-30 13:34:54.097 3003162
3 Testing 2018-05-31 18:31:32.467 3003162
If selected procid is 3, how can I get it to be selected by default?
FYI - I have tried multiple answers given in other threads. I have also tried ng-init but nothing helped.

You can keep your HTML as:
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="selectedProcess">
<option value="">-- choose an option --</option>
</select>
Now if we have a requirement to select a particular object in the array. We can do that by iterating through the array and comparing value at the given key:
function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
for (var i = 0; i < arraytosearch.length; i++) {
if (arraytosearch[i][key] == valuetosearch) {
return i;
}
}
return null;
}
Call this function as:
var index = functiontofindIndexByKeyValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);
Hope it works!

Update your html code to this:
<select ng-model="processSelected"
ng-options="p.procname for p in processes track by p.procid">
</select>
Then in controller initialise your model value as:
$scope.processSelected = $scope.processes[1];
Where $scope.processes is an array of process objects.
Plunker Example

Related

Laravel Query depend on Multiple HTML Select tags

I've multiple Select tags in HTML form i.e 'Gender', 'District' etc where the default selection is All. The eloquent query is dependent on these tags. I can retrieve data from DB if user select an option like Male or Female but don't know how to use `All'.
here is html code of Gender Select tag.
<div class="col-md-2">
<label for="gender">Gender</label>
<select wire:model="byGender" class="custom-select form-control" name="gender" id="gender">
<option selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="combine">Combine</option>
</select>
</div>
and here is Laravel Code
public function mount()
{
$this->rows = DutySheet::where('gender', $this->byGender)->get()->toArray();
}
Note: this is Livewire function and byGender will be updated as the user select an option.
My question is what to use as value of All option in Select tag to retrieve all data from DB, "" is not working.
Your All options are represented by empty values (empty strings). You can leverage this by using the when() method on the query-builder, which effectively is an if-statement - the closure is only applied to the querybuilder if the first parameter is true.
$this->rows = DutySheet::when($this->byGender !== '', function($query) {
return $query->where('gender', $this->byGender)
})
->get()
->toArray();
You can chain these and add as many when() as you want to your query, to compute a more complex query with conditional conditionals.
You can add some logic to only apply the where condition when the select menu is set to any value other than "All".
If the user selects male, female or combine then the where condition will be run against that value, otherwise the query will return every record.
public function mount()
{
$dutySheets = DutySheet::query();
if ($this->byGender !== 'All') {
$dutySheets->where('gender', $this->byGender);
}
$this->rows = $dutySheets->get()->toArray();
}

VueJS Search for exact word or phrase

Im querying data which is pulled in via an Axios call. The drop-down 'subjects' pulls back results and queries the data but I would like it to only pull back exacts. For example, if I select 'English', I just want it to return subjects which have the subjects 'English' and not the subjects which are 'English and maths'.
Would I use a regEx. If so how would I go about this? Any help appreciated.
<select v-model="subject"
class="form-control"
#change="subjectonchange()"
:disabled="selectDisabledSubject"
>
<option disabled value="">Select subject</option>
<option
v-for="subject in uniquesubjects"
:key="subject"
:value="subject"
>
{{ subject }}
</option>
</select>
method: { subjectonchange: function () {
let query = "";
if (this.subject !== "") {
query = this.subject;
console.log(this.subject);
} else {
query = "!showall";
}
this.query(query);
},}

Materialize select how to recreate?

I came across with this issue during my work process and couldn't find any logical solution.
Firstly, I have two dropdown menus. One for countries, other for cities. As Materialize converts select element into ul, thus I have two ul-s instead.
<select name="res_country" id="res_country">
<option selected="" disabled="">Ölkə</option>
<?php
foreach ($countries as $country) {
print "<option value='".$country['id']."'> ".$country["text"]."</option>";
}
?>
</select>
<select name="res_city" id="res_city">
<option selected="" disabled="">Şəhər</option>
<?php
foreach ($cities as $city) {
print "<option parent=".$city['country_id']." value=".$city['id'].">".$city['text']."</option>" ;
}
?>
</select>
I wanted to dynamically set options of second dropdown according to which country I selected in the first one.
Yes, I have already read about that I should firstly destroy and then create dropdowns after modifiying them. But this didn't work.
I fixed this problem by writing below code in JS.
$('#res_country') stands for first dropdown with countries, $('#res_city') for the second with cities.
$('#res_country').on('change',function () {
var country_id = $('#res_country option:selected').val();
var indexes = [];
//
$('#res_city option').each(function()
{
if($(this).attr('parent') == country_id){
var val = $('#res_city option').index($(this));
indexes.push(val);
}
});
console.log(indexes);
$('#res_city').prev().children().hide();
for(var i=0; i<indexes.length; i++){
$('#res_city').prev().children().eq(indexes[i]).show();
}
});
But I am not satisfied with such solution. I wonder if any of you had similar situation?

Datatables - Length (select option) outside datatable

I am using DataTables and I would like my length(select option) to outside of the table
(ex. on my div).
create new select form
<select name='length_change' id='length_change'>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='150'>150</option>
<option value='200'>200</option>
</select>
init dataTables
var oTable = $('#example').DataTable({});
set initial value
$('#length_change').val(oTable.page.len());
add function .change
$('#length_change').change( function() {
oTable.page.len( $(this).val() ).draw();
});
reference : https://datatables.net/reference/api/page.len()
It cannot be directly moved by just copying the whole change length drop down outside the table.
Instead create a new drop-down, where ever you want but set the following in the datatable call -
<select name='length_change' id='length_change'>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='150'>150</option>
<option value=''>All</option>
</select>
`var oTable = $('#sample_1').dataTable( {
.....
"bLengthChange": false, //This will disable the native datatable length change
.....
...
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "length_change", "value": $('#length_change').val() } );
},
.....
....
});
`
The `aoData.push` will send the selected value of the customer length change to the server.
In the Model Class from where the array will be returned for the datatable, include the pushed value to the limit.
i.e. if `$postData` is the array of posted values to the server then -
`if($postData['length_change'])
$limit = (int) $postData['length_change'];
else
$limit = _DEFALUT_VALUE;
`
I hope it helps.

select a record from a list-box using text in Protractor

I want to select the record from the list box using text. how can i use the filter function to select the particular record. I will be having many options but i want to select the value which i want by checking the text (e.g Spanish). I dont want to select value by index becoz if i do that i wont be able to verify test, moreover list gets updated. kindly help. below r my html code.
<ul class="addList">
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Mandarin</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">English</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Spanish</li>
</ul>
Yea i can select the record by index. but i want something like selectbyvisibleText which is available in Selenium.
Finally got the solution. created a function SelectRowByCellValue and used to call it where ever i want by
SelectRowByCellValue(AGP.SkillList, Data.SkillSelect);
SkillList = element.all(by.css('Ul.addList li'));
SkillSelect = Value that u want to select. (Spanish)
this.SelectRowByCellValue = function (Elem, Texts) {
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts) {
element.click();
return false;
}
});
}).then(function (filteredElements) {
});
};