I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?:
<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
$scope.getById = function (id) {
console.log(id);
return $http.get('/api/Post/' + id);
}
You should use ng-model directive for your input element.
Markup
<input type="text" name="name" ng-model="post.PostId" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
This will take care of 2-way model binding to your property post.PostId. Your ng-click directive will pick up the correct value entered in input element.
See my working Plunk :)
Related
How to detect input field value changes immediately without pressing enter button in angular ?
I was trying to trigger a function on a value change of input field in Angular. Initially I used Keypress event, that was detecting the insertion the input field correctly, but even I used backspace to remove any character from the value, it didn't trigger that function, which means that these changes went unnoticed. I was expecting that it would trigger that event on the each change or update of the value.
you can use [(ngModel)]. I suggest you "split" the "bannana sintax"
<input matInput placeholder="Word"
[ngModel]="search"
(ngModelChange)="search=$event;doSomething($event)">
doSomething(value:string)
{
console.log(value)
}
Another ways can be
<!--see that the event "input" return a "generic event"
so you use $event.target.value to "reach" the value-->
<input matInput placeholder="Word"
[(ngModel)]="search"
(input)="doSomething($event.target.value)">
Or
<input matInput placeholder="Word"
[(ngModel)]="search"
(ngModelChange)="doSomething($event)">
Using Input
In HTML
<input (input)="type($event)" type="text" />
In TS
type(event) {
console.log(event.target.value);
}
Using ngModel
In HTML
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
In TS
mymodel:any
valuechange(newValue) {
this.mymodel = newValue;
console.log(newValue)
}
Demo Link :- Link
By using two-binding and ngModelChange event, worked for me to detect all changes.
Sample code :
<input matInput placeholder="Word"
[(ngModel)]="search"
(ngModelChange)="filterTbl()"
matTooltip="Filter Result">
Assume my webpage has the following dynamically generated textbox elements with class='mytxt'.
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
<input type="text" class="mytxt" />
How do I get current textbox element user is typing on and pass it to another function as argument. Something like:
$("body").on("keyup", ".mytxt" ,function(element) {
// where element is current textbox element user is typing on
someFunction(element);
});
I know it is possible to have onkeyup in html and pass 'this' as argument as shown below, but this isn't an option for me since I don't have access to the code that dynamically generates the textbox elements.
<input type="text" class="mytxt" onkeyup="someFunction(this);"/>
The delegate event will pass a variable which is an event. We can get the element from event.target
See MDN
$("body").on("keyup", ".mytxt" ,function(event) {
var element = event.target;
someFunction(element);
});
I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?
try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>
I have a simple form, when I type in the input, i see the changes.
But when I do it dynamically via JS the bind is not changing:
<div ng-app>
type here and see how the binding changes:
<input type="text" id="test" ng-model="name" />
<br /><br />
Changes and binding <span style='color:red'>{{name}}</span><Br /><Br />
<button onclick="document.getElementById('test').value = 'blaaaa'">Click and see how the binding is not changing</button>
</div>
http://jsfiddle.net/hge2hnc4/
this is because, when you click the button you try to change the textbox value not the textbox model(name) value, if you change the model name value you will be able to see the update
Here is a forked Demo
How can I direct AngularJS to assimilate the value attribute into the model? Any field that I give an ng-model attribute has its value immediately replaced with nothing, or whatever I define in the controller. Here's some code:
<form action="" method="post" ng-controller="PageCtrl">
<input type="text" name="title" ng-model="title" value="Initial field value">
</form>
And the Javascript...
function PageCtrl($scope, Slug) {
$scope.title = null;
}
I've tried not setting$scope.title, setting it to other things, but no matter what I do, the value is completely ignored. What can I do?
Yes, the value attribute is ignored by angularjs in favor of ng-model. It'd better just to remove value from your input entirely to avoid confusion.
The angular way of setting the default value would be to set $scope.title = 'Initial field value' inside your controller, and that's the preferable way to structure things as far as possible. If that's not possible then you can use ng-init on the input to do the same thing too, e.g.
<input type="text" name="title" ng-model="title" ng-init="title = 'Initial field value'">