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)
Related
I am using angularjs directive and I want to add double quotes for a value which is get through data binding in angularjs template.
my code is,
template = '<div>'+
'<a>'+'User name is ' + user.name + '</a>'+
'</div>'
I need the output as given below
User name is "davit"
How to add double quotes for the name davit?
just add the double quotes before and after single quotes like this
'<a>'+'User name is "' + user.name + '"</a>'+
Try this:-
template = '<div>'+ '<a>'+'User name is "' + user.name + '"</a>'+ '</div>'
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
}
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>
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 + ') ';
};