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
}
Related
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)
say I have an angular expression like this:
<span>{{vm.name}} {{vm.property|prettyPrint}}</span>
Say that property is optional, and may result in empty string. How do I get rid of that no-longer-necessary space after the name? I tried doing something like
<span>{{vm.name + ' ' + vm.property|prettyPrint |trim}}</span>
but that doesn't work.
The reason
<span>{{vm.name + ' ' + vm.property|prettyPrint |trim}}</span>
doesn't work is because it's applying the prettyPrint filter to everything. Change it to this:
<span>{{ (vm.name + ' ' + (vm.property | prettyPrint)) | trim }}</span>
Place the space inside the propery like this
<span>{{vm.name}}{{' ' + vm.property|prettyPrint}}</span>
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.
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 + ') ';
};