I want to deploy a select box where entries would be colored differently depending on the data. Here is a sample HTML:
<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
<option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}">
<div ng-style="({{One_Board.Status}} == 'Y' ? font-color:black : font-color:red)">{{One_Board.SN}}</div>
</option>
</select>
So, each entry has the structure {"SN":"<value>","Status":"<status>"}. So, each entry whose status is 'Y' would be shown in black, and any entry with a status different from 'Y' would be shown in red.
I can't figure out what should be the correct syntax.
Please try this:
<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
<option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}" ng-class="{redcolor: One_Board.Status != 'Y'}">
{{One_Board.SN}}
</option>
</select>
And in your CSS:
option {
color: black;
}
.redcolor {
color: red;
}
But maybe changing font-color to color alone will do the trick as well ;-)
Related
I'm working on angularjs and I have a field that has two options YES/NO.
When someone will fill this field I need to show the two options but non of them is selected. So it will look like an empty value, but this empty value should not be an option. I tried to add <option value="?"></option> in the following code, but then the empty value is an option.
Any ideas?
<div class="col-md-3" ng-if="obj.options.length > 0">
<select class="form-control" ng-model="patientReportedSymptomsUI[key]" ng-disabled="$root.newVisit">
<option value="?"></option>
<option ng-repeat="option in obj.options">{{option}}</option>
</select>
</div>
In my SELECT when I select an option only the inner part becomes yellow. I would like the whole select field to turn yellow.
This is my code:
.bootstrap-select.btn-group .dropdown-toggle:not([title=""]) .filter-option {
background-color: yellow !important;
}
<select class="selectpicker form-control" data-size="40px" data-width="210px"
style="height: 80px" data-live-search="true" data-none-Selected-Text=""
data-hide-disabled="true" data-container="body" name="mittente_nucleo"
id="mittente_nucleo">
<option></option>
<option>1</option>
<option>2</option>
</select>
JSFiddle
You can change the background color with an jQuery event
$('#mittente_nucleo').on('change', function(){
var selected = $('#mittente_nucleo option:selected').val();
var element = $('button[data-id="mittente_nucleo"]');
element.css("background-color", "yellow");
});
JSFiddle https://jsfiddle.net/yrtd7oa4/
Here's my Codesandbox
Now I change the title when user select an item on selectList(antd component) using e.target.textContent.
is there any way that i can show all the values, now I'm only able to show one select list value.
I want something like this : value from first dropdown / value from second dropdown
<DropDown>
<DropDown.DropDownTitle>
This title will update after user selection // this should be updated when user select
</DropDown.DropDownTitle>
<DropDown.DropDownBody>
<Select
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
>
<Option value="jack">another</Option>
<Option value="lucy">another 2</Option>
</Select>
<Select
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
>
<Option value="jack">another 3</Option>
<Option value="lucy">another 4</Option>
</Select>
</DropDown.DropDownBody>
</DropDown>
I can see you're using antd, I believe it's better to use Select with multiple selection, it will set the values the way you want it.
here's their sandbox: https://codesandbox.io/s/cpive
I have a select menu with using ng-model and a list of values like so:
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
This all works well when the ng model value is in the list of $ctrl.Values. However, when it isn't I get a default option auto-inserted with a blank text which is displayed. I know I can initialize the properties value to ensure this doesn't happen. However, what I actually want to do is change the display text of this default option to something like "Please select" or similar. Is there a way to set the text which is displayed for this default option?
you can manage this by checking if your array is empty or ngModel is null/undefined
like as sample
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option value="" ng-if="$ctrl.values == null || $ctrl.values.length == 0 || $ctrl.ngModel == null"> Please select ... </option>
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
When registering a user, I want to immediately define the role for it, for this I added a scroll, but since the roles field in Java is an array, I pass this value as an array, and so, I cannot understand why this value is not assigned
<div class="bloc">
<select name="role" size="">
<option value=["ROLE_USER"] ng-model="user.roles">ROLE_USER</option>
<option value=["ROLE_SUPPORT"] ng-model="user.roles">ROLE_SUPPORT</option>
</select>
</div>
As you understand, I cannot add a user like that, but if I add $scope.user.roles = ["ROLE_USER"] in the controller;
then the value is assigned to the roles field, and no problems arise, what would you advise on this issue? I get 400 error.
Can send more info if needed
<option value=["ROLE_USER"] ng-options="user.roles">ROLE_USER</option>
is it right version?
<label>Color grouped by shade, with some disabled:
<select ng-model="myColor"
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select>
</label><br />
that example from link