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>'
Related
I have a angular select drop down with ng-options and ng-model and two input text boxes.when i select last option in drop down text boxes are enabled which are disabled by default.If i am selecting last value in drop down text boxes are enabling and on reload of page i made condition to select a option with empty value.And when i select last option again still text boxes are in disabled mode
Rangeslicer += "<div id='Rangeslicer"+id+"'>"
Rangeslicer += " <select class='selectpicker' id='rangepicker" + id + "' data-ng-change='RangeSelection(" + '"' + id + '"' + ")' ng-options='dayNames as dayNames.dayName for dayNames in RangeSelector' style='border-radius:5px;height:25px;outline:0px;text-align:center'>"
// Rangeslicer += " <select id='rangepicker" + id + "' ng-options='dayNames.id as dayNames.dayName for dayNames in RangeSelector' style='border-radius:20px;height:25px;outline:0px;text-align:center' ng-model='rangepicker" + id + "'>"
Rangeslicer += " <option value=''>Select Date Range</option>"
Rangeslicer += "</select> <br/>"
Rangeslicer += " <div id='custominput' style='margin-top:4%'><input type='text' class='daterangecustom" + id + " datecustom' id='customstart" + id + "' disabled ng-model='customstart' style='height:25px;border-radius:5px;width:35%;margin-right:10%;margin-left:3%;text-align:center;outline:0px'/><input type='text' class='daterangecustom" + id + " datecustom' id='customend" + id + "' disabled ng-model='customend' ng-mouseleave='compareDates(" + '"' + id + '"' + ")' style='border-radius:5px;width:35%;height:25px;text-align:center;outline:0px'/></br><p id='errormessage" + id + "' style='display:none;margin-bottom:0px'>Please ensure that the End Date is greater than or equal to the Start Date.</p></div></div>"
//$compile($('#Rangeslicer').empty())($scope);
// $compile($("#divChk" + id).empty())($scope);
$compile($("#main" + id).append(Rangeslicer))($scope);
$('select.selectpicker option:first').prop('selected', true);
Actually when option is changed to last value textboxes should enable
Try using ng-disabled="lastSelected()" on your inputs, where lastSelected is a function that checks if the ng-model value on your select is the empty item.
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
}
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.