I have multiple set off field name and I want to display all those in single textbox using ng-model. But I am able to display only single field name.
This is my code : <p> {{cts.selectedcontact.location.state + " "cts.selectedcontact.location.postcode}} </p>
<input type="text" ng-model="cts.selectedcontact.location.state"+`"cts.selectedcontact.location.postcode"> <br/>`
try this
angular.module("app",[]).controller("appContr",function($scope)
{
$scope.newmodelName="";
$scope.Sample1="ram";
$scope.Sample2="esh";
$scope.Concstring=function(val1,val2)
{
return val1+val2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appContr">
<input type="text" ng-init="newModelName =Concstring(Sample1,Sample2)" ng-model="newModelName">
<br />
</div>
well ng-model shall have only one argument, that will be binded to the field value and it will receive the value of the input field every time it is changed. So you can not use several variables in one ng-model.
But if you would like to show it as a default value, then you can set it in the value argument in html, or just in your js file. like so:
<input type="text" ng-model="modelValue"> <br/>
and in .js file:
$scope.modelValue = $scope.cts.selectedcontact.location.state + $scope.cts.selectedcontact.location.postcode;
You can initialize new variable for text box like as
<div ng-init="newField = cts.selectedcontact.location.state + cts.selectedcontact.location.postcode">
<input type="text" ng-model="newField"> <br/>
</div>
Related
I am using AngularJS. I have two input fields: total marks and marks obtained, as well as a 3rd field which is percentage. Now after entering total marks and marks obtained, I need to calculate the percentage automatically.
Here is my html :
<div class="form-group">
<label class="control-label">Total Marks</label>
<input type="text"
class="form-control input_field"
name="totalMarks"
data-ng-model="student.totalMarks" />
</div>
<div class="form-group">
<label class="control-label">Marks Obtained</label>
<input type="text"
class="form-control input_field"
name="marksObtained"
data-ng-model="student.marksObtained" />
</div>
<div class="form-group">
<label class="control-label">Percentage</label>
<input type="text"
class="form-control input_field"
value={{ ((student.marksObtained/student.totalMarks)*100).toFixed(2) }}
name="rank"
data-ng-model="student.rank" />
</div>
Can anyone tell me how to auto generate rank field with percentage as soon as I enter marks obtained. Currently, I am doing as shown above but it is not working.
Not sure that your calcul for percentage is exact, but this Plunkr is working with a watcher on student properties.
app.controller('MainCtrl', function($scope){
$scope.$watchGroup(['student.totalMarks', 'student.marksObtained'], function(){
if($scope.student.marksObtained !== undefined && $scope.student.totalMarks !== undefined)
$scope.student.rank = (($scope.student.marksObtained/$scope.student.totalMarks)*100).toFixed(2);
})
});
https://plnkr.co/edit/NsNge0mzrgjjUgBZ332p?p=preview
You can try assigning your calculation inline, like this:
<input ng-model="student.rank" ng-value="student.rank = ((student.marksObtained/student.totalMarks)*100).toFixed(2)">
Running Example on JsFiddle
It does not work because your input is linked to a ng-model.
There is two ways to solve this problem :
Setup a watcher on student.totalMars and student.marksObtained, and update student.rank with new value.
Do not link your percentage to student.rank and just set the value as you did.
You can check here for the second way.
In your controller, add the following function and variable :
function getPercentage() {
// dividing by zero is bad !!!
let ratio = $scope.student.marksObtained / ($scope.student.totalMarks || 1);
return (ratio * 100).toFixed(2);
}
$scope.student.percentage = getPercentage();
Then change the last <input /> of your view to :
<input type="text"
class="form-control input_field"
ng-value="student.percentage"
name="rank" />
If you want your input to have two-way data binding, use ng-model instead of ng-value.
not sure why but the property binds just fine to textarea and doesnt want to bind to a text box...
Here is HTML:
<form method="post" ng-submit="vm.executeAction('CompleteWorkOrder')">
<div class="form-group">
<label for="resolutionNote">#("Resolution Note".T())</label>
<textarea name="resolution" class="form-control" rows="4" placeholder="Provide resolution..." ng-bind="vm.woComplete.Resolution" required></textarea>
</div>
<div class="form-group">
<label for="completionDate">#("Completion Date".T())</label>
<input type="text" name="completionDate" class="form-control" ng-bind="vm.woComplete.Resolution" required>
</div>
<label>#("MRT".T()) {{vm.data.MRT}}</label>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</form>
and the result
Does anyone know why this is happening? Thanks.
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
In your screenshot you can see that the text you entered in the text area DOES appear between the <input> and </input> tags. But, while that's fine for a textarea, that's not how an input works. An input stores it's data in the value attribute. You would want to use ng-model to get what you want.
I have a datetimepicker.
Overall, it works fine and updates the text box fine. However, when I place a ng-model onto the input field, nothing gets passed through to the binding at the bottom of the page.
Here!s the form I'm using :
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' ng-model="package.timeA" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
This is my JS code :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
For the input box give some id or class name then initialize datepicker with that id or class
<input type='text' ng-model="package.timeA" value="" class="mydatePicker form-control" />
$('.mydatePicker ').datetimepicker();
It will work.
You can try to use $apply who allow to force reload of the variable and $setViewValue who allow to set the variable of the view.
add ng-change on your input tag and pass the date.
In your controller you can make a function like this:
$scope.onChange = function(package.timeA)
{
$scope.$apply(function (){
YourCtrl.$setViewValue(package.timeA)
}
}
I am having trouble formatting a date in a read-only field using AngularJS. This is my html code -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="datetime" name="dateLastLogin" class="form-control" data-ng-model="loginDate" readonly />
</div>
</div>
I have tried to format it using this code in my controller -
$scope.$watch('vm.account.dateLastLogin', function(newValue) {
$scope.loginDate = $filter('date')(newValue, 'MM/DD/yyyy');
});
Putting a break point in the controller, I see the function being called but nothing is displayed.
If I leave my html like this -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="text" name="dateLastLogin" class="form-control" data-ng-model="vm.account.dateLastLogin" readonly />
</div>
</div>
I get a displayed value that includes the date and time but not formatted as I need it. What am I missing?
According to this answer, the W3C removed the datetime input type from the HTML5 Specification. date and datetime-local are still valid.
In your example, throw out the formatting filter and simply use the ng-model="vm.account.dateLastLogin" on a valid date input, like:
<input type="date" ng-model="vm.account.dateLastLogin" />
or
<input type="datetime-local" ng-model="vm.account.dateLastLogin" />
These date formats are formatted correctly to the client browsers locale.
Or, if you actually just want it in some text field, put the filter directly in the ng-model but still use a valid Date object, like:
<input type="text" ng-model="vm.account.dateLastLogin | date:'MM/dd/yyyy'" readonly />
See this jsBin for some examples
i am trying to create a dynamic form in angular. if type is text, the input will be <input type="text">. If type is checkbox, it will display <input type="checkbox">
here is the data successfully requested from server that i put in controller $scope
.controller('FormCtrl', function($scope){
$scope.form_data = [
{"id":1,"question":"Name","type":"text","user_criteria":"faiz","answer":[]},
{"id":5,"question":"Hair Type","type":"checkbox","user_criteria":"Long","answer":[{"id_answer":10,"id_survey":5,"answer_txt":"Long"},{"id_answer":11,"id_survey":5,"answer_txt":"Short"}]}
];
$scope.updated_form = {};
});
this is the template
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{fm.user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox"> {{ans.answer_txt}}
</div>
</div>
</div>
for the input type text value. it appears label print Name and the input value print faiz. the code are displayed successfully to the correct input type and value.
but i have 2 question.
is there a way in the checkbox to check the value of the user_criteria to check the checkbox input?
how to pass all this data into the $scope.updated_form so i can use the value from the input like this ?
$scope.updated_form = [
{"id":1, "user_criteria": "faiz new name"},
{"id":5, "user_criteria": "Short"}
];
i am stuck to pass the form data for processing since i am lost when it comes to nested loop in the checkbox
I made a small sample to resolve your issues:
http://jsbin.com/pahuwe/3/edit?html,js,output
I used a initial fill function, to transfer the data to updated_form field:
$scope.updated_form = [];
$scope.form_data.forEach(function(item) {
$scope.updated_form.push(item);
});
and I used input radio for select, but with model and value parameters:
<input type="radio" ng-model="fm.user_criteria" ng-value="ans.id_answer"/>
Use a same ng-model to permit select a unique response.
My understanding is, you want to know what user checked and inputted , you can use another model to store the user data.(You need to init the updated_form with ids) And for the checkbox, you need to add a function with ng-change to set the checked answer into related data. It will be like
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{updated_form[fm.id].user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox" ng-model="theChecked" ng-change=" if (theChecked) updated_form[fm.id].user_criteria = ans.answer_txt; "> {{ans.answer_txt}}
</div>
</div>