I have a select that I'd like to change the ng-options display based upon the viewport. Here is a working example of using two selects, hiding/showing if mobile (using Bootstrap 3 classes). The styles of the select are conditional using CSS3, but I'd like to have the data be conditional as well.
<select id="selectSearchLocation"
class="form-control search-location hidden-xs"
ng-model="vm.searchLocation"
ng-options="x.code as x.name +' (' + x.code + ')' for x in vm.searchLocations">
</select>
<select id="selectSearchLocation"
class="form-control search-location visible-xs"
ng-model="vm.searchLocation"
ng-options="x.code as x.code for x in vm.searchLocations">
</select>
You can see the only difference is in the ng-options, the display/format "as" changes. i.e. "Colorado - CO" simply is "CO" for mobile if searchLocations is an array of State objects.
Could this be handled by a filter in Angular?
There are multiple ways of doing this. The first thing that comes to mind is to use a function instead of the literal value for the "as".
Something like:
ng-options="x.code as searchDisplay(x) for x in vm.searchLocations"
And in your controller:
$scope.searchDisplay = function(searchLoc) {
if (mobile) {
return searchLoc.code;
}
return searchLoc.name + ' (' + searchLoc.code + ') ';
};
Related
In my angularjs application I have a <select> field. Like so:
<select name="deliveryAddress"
class="selectpicker"
ng-options="address as a.Address1 + ' ' + a.HouseNumber for a in customer.deliveryAddress track by a.Id"
ng-model="customer.deliveryAddress.selected">
</select>
In most cases a.Address1 is the streetname like "Miles St" and HouseNumber is the house number like "51". But in some cases, a.Address1 is "Miles St 51" (it includes the house number field). Than the select box shows: "Miles St 51 null", because a.HouseNumber is null. Is there a way to prevent displaying "null" within the selectbox, or am I forced to make two separate <select> fields?
there u go ng-options="address as a.Address1 + ' ' + (a.HouseNumber ? a.HouseNumber : ' ') for a in customer.deliveryAddress track by a.Id"
I have the following input field:
'<input check-value-type' +
' type-value="$$node.type_value$$" ' +
'ng-repeat="input in inputs track by $index" ' +
'type="text" ' +
'placeholder="Value ($$node.type_value$$)"' +
'class="form-control" ng-change="changeArrayValue()" ' +
'ng-model="node.value[$index]">' +
How to pass current value into: ng-change="changeArrayValue()"
I tried as: ng-change="changeArrayValue(node.value[$index])"
As I can see from your code; you are creating Angular JS directives / html code within your js file.
This is totally wrong ! !!! and you shall not do that.
Add a proper template; than you can access to the value with ng-model
I am not sure if what you are doing there is correct but if you have a value field in the input tag then I think you are looking for $event.target.value
Try ng-change="changeArrayValue($event.target.value)
I have an array that is outputted and displayed using ng-repeat, with the list and example data being as follows:
List display:
<li ng-repeat="ingredients in recipeObject.ingredients">
{{ ingredients.amount + ' ' + ingredients.unit + ' '+ ingredients.ingredient}}
</li>
Example object:
$scope.recipeObject = {
ingredients : [
{amount:1, unit:"tablespoon", ingredient:"Olive oil"},
{amount:0.5, unit:"", ingredient:"Red onion"},
{amount:2 , unit:"", ingredient:"Bay leaves"}]
}
Which will display something that looks like
However, I would like to be able to replace values such as 0.5 with values such as "Half", so the displayed value would read something like "Half a Red onion".
I do not want to change the amount to the string, as the amount being numeric allows me to compute important data.
Is there a way to conditionally change the displayed amount, such as if the amount is a decimal value, to a different format?
Alternatively, having a display filter that changes the decimal value to a fraction is acceptable too.
There are several ways:
Best (scalable/angular-ish) - filter (as mentioned above)
Ugly:
<li ng-repeat="ingredients in recipeObject.ingredients">
{{
ingredients.amount==0.5?'half':
ingredients.amount==0.25?'quarter':
//etc...
ingredients.amount
+ ' ' + ingredients.unit + ' '+ ingredients.ingredient}}
</li>
Easy
<li ng-repeat="ingredients in recipeObject.ingredients">
{{ myFormat(ingredients.amount) + ' ' + ingredients.unit + ' '+ ingredients.ingredient}}
</li>
And inside controller:
$scope.myFormat = function(input){
if (input == 0.5) return 'half';
else if (input == 0.25) return 'quarter';
//etc...
else return input
}
I have an expression that's pull data from a controller, the number of pages of a book.
If the data exists, I want to print "X pages", where X is the value. Otherwose, I want the HTML paragraph to be blank.
But, I can't get the syntax correct. Below, it always prints out ' pages', even if blank. How do I set up my expression?
<p>{{reviewFormCtrl.book.numPages + ' pages' || "" }}</p>
I tried doing ternary operator in the expression, but didn't have lukc
<p>{{(reviewFormCtrl.book.numPages > 0)?{{reviewFormCtrl.book.numPages + ' pages' :"" }}</p>
Try
<p ng-if="reviewFormCtrl.book.numPages">{{ reviewFormCtrl.book.numPages }} pages</p>
You have to use the below code to achieve what you want:
<p>{{ reviewFormCtrl.book.numPages ? reviewFormCtrl.book.numPages + ' pages' : "" }}</p>
my HTML code for drop down like follow:
<select ng-model="selected_value"
ng-options="(x.version + ' ' + ' : ' + x.status) for x in allData"></select>
my Angular code like follow :
data comes from a rest service
$http.get(......).success(function (data, status){
$scope.allData = data;
$scope.selected_value = $scope.allData[0].version + " : " + $scope.allData[0].status;
});
Data comes to the drop down. but initially drop down does not display the value. It shows if only select the value. Can someone help on this issue.
Add ng-selected="selected_value" to the select element.
An example of what you are trying to achieve can be found in the ngSelected documentation.