How to get button text with ng-model in angular.js? - javascript

I just started to work with Angular, it seems good to implement.
I always use ng-model to get text from textfield.
Can I get the button text with help of ng-model or something else?
I know it's not good question to ask here. but I didn't get any relevant solution for anywhere.
for example this is button
<button class="common btnDarkGrey">Do it</button>
and I want to get Do it with Angular
Thank You.

You should use ng-bind to bind the data in your controller to the button.
<button ng-bind="buttonNameVariable"></button>
Then in your controller you will have a variable named scope.buttonNameVariable="Do it"
You can use the variable in the controller, and retrieve it with the variable. You use ng-model only for input fields in html, not for buttons for example.

how about:
$scope.buttonText = 'Do It' //in the JS
<button>{{buttonText}}</button> <!-- in the HTML -->
or:
<button ng-init="buttonText = 'Do It'">{{buttonText}}</button>
Then you have the text of the button in the buttonText variable.

If you don't mind putting jQuery codes in angular, this could be done:
$('button.common').click(function(){
console.log($('button.common').html())
});

Related

How to set content to easyui panel with javascript

I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?
$('#pp').append(drf); works OK
Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);

How show an AngularJS variable containing code in HTML <pre> or <code> tag?

Any hint about this? I googled quite a bit but didn't find anything yet..
This code is showing me the variable name instead the code I stored there:
<pre class="prettyprint">{{::data.template}}</pre>
Thanks in advance.
In Angular 1 & 2 you should just be able to use handel bars;
<pre class="prettyprint">{{data.template}}</pre>
You can also bind the data,
Angular 1:
<pre class="prettyprint" ng-bind="data.template"></pre>
Angular 2:
<pre class="prettyprint" [innerText]="data.template"></pre>
You can find more info about binding here - https://www.themarketingtechnologist.co/introduction-to-data-binding-in-angular-2-versus-angular-1/

Angular appending html with directives from within a directive

I'm trying to write a small directive that will append the validation tags and ngMessages dynamically to the input. But I'm having trouble appending the ng-message attribute to the div.
The idea is to have this,
<div validator validations="{json_data containing error messages}">
<input name='fieldName'>
</div>
Turned in to the following according to the provided JSON.
<div validator>
<input required="required"></input>
<div ng-message="fieldName" ng-if="fieldName.$dirty>
<p ng-message="required"> scope.message </p>
</div>
</div>
I've currently managed to get the ng-required appeneded using the answer to this answer. But I can't seem to append the ng-message tag using the same technique. What should be done differently to solve this issue?
The final directive should be able to generate something like this Fiddle
The current version can be found in the Fiddle here the example works as expected until 'scope' is added. But as soon as 'scope' is added, the example stops working.
Update
I've realized that this only occurse when you add a local scope. This error doesn't occure when using the global scope and accessing the variable using scope.$eval(attrs.message)

Why I can't access a form object inside a ngInclude on angularJS?

I have a screen built with a several stacks of ng-includes. The last one, in special, I build the screen based on user configuration.
Sometimes, I have to show a Form in one of this included templates. And when my user click on save button, I have to validate if all fields in the form are valid.
In the meantime, when a try to access form object, to check for $valid, my form is undefined.
After a day fighting against it, I've discovered that ng-include process is not accepting my form object to be created.
I've created this plunker to see if it's really happening on a simple project, making a working form and not working one:
http://plnkr.co/edit/4oMZYLgaYHJPoSZdSctI?p=preview
Basically, created a form, like this, with demanded angular attributes:
<form name="sampleForm">
<input type="text" name="aws" required ng-model="myValue">
<br/>myValue: "{{ myValue }}"
<br/>
<input type="text" name="aws" required ng-model="myValue">
<br/>myValue: "{{ myValue }}"
</form>
And trying to access form object like this:
$scope.sampleForm.aws.$valid
And the result is:
$scope.sampleForm === undefined
Someone know how to solve this problem?
Since ng-include creates a new scope, $scope.sampleForm will be undefined from within the included page.
The solution should be getting the ng-controller="formController" declaration inside of the included HTML page itself, which I think is also a better design, since I can't see a scenario where it's not "controlling" the form.
The other non-included form obviously works as you might expect.
Plunker

Dynamic variable for angular ng-click attribute

I am using the following way to use $scope variable ({{func}}() in this case) as function name in ng-click.
<button type="button" ng-click="{{func}}()">Call {{func}}</button></pre>
This works in angularjs-1.2.0rc3. See working plunkr here
Any future version from > 1.2.0rc3 throw this error
What's changed? How can I use the above syntax in current angular version?
Ok first of all I do not recommend such a usage for ng-click because angularjs itself do not support this, but if you still want to use it such a way here is your solution...
<button type="button" ng-click="$eval(functionName)()">...</button>
where
$scope.f1 = function() {
...
};
//name of function as a string
$scope.functionName = "f1";
this is what your are looking for and here is your PLUNKER example...
All I did was append scope to both variables
<form name="angular" ng-controller="Ctrl">
<button type="button" ng-click="{{scope.func}}()">
Call {{func}}
</button>
<label>Status: {{scope.status}}</label>
http://jsfiddle.net/bebold/TmKLY/1/
I wouldn't advise going this route for dynamic variable change, a better choice would be to create a directive and do the binding within the template:
A great explanation can be found HERE.

Categories