bs-tooltip restricts two way data binding - javascript

I am trying a simple code with angular strap's bootstrap tooltip. I am seeing that AngularJs data binding is not working when bs-tooltip is used.
Bind not working
<input type="text" ng-model="name1" data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}
Bind works
<input type="text" ng-model="name"> {{ name }}
Plunker demo
Am I missing something?

Sounds like angular-strap creates a child scope for the input control, but {{name1}} is located to its parent scope. If you inspect the HTML, you will see ng-scope in class, while the second input control does not.
<input type="text" ng-model="$parent.name1"
data-trigger="focus" data-type="success" data-title="something" bs-tooltip=""
class="ng-valid ng-scope ng-touched ng-dirty ng-valid-parse">
My simple solution is to add a $parent. prefix to the variable. It works as
<input type="text" ng-model="$parent.name1"
data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}

Related

How do i autofill angularjs input

I am trying autofill a website using javascript.
This code
document.getElementsByClassName('form-control')[1].value = "MYNAME";
input text changing but when i click the submit button it says empty.
Please help me..
This is the html
<div ng-app="VitaminMiddleSchoolApp" ng-controller="componentEbaEtudExternalEditViewController">
<input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()" style="">
You need to use scope.$apply() after calling document.getElementsByClassName('form-control')[1].value = "MYNAME"; Because angular doesn't know about your autofilled inputs.
But better solution is to use angular model way. So for example if you want to autofill <input type="text" ng-model="my_test_model"> you can just use ng-init directive : <input type="text" ng-model="my_test_model" ng-init="my_test_model='test_value'"> or assign it in the angular controller scope.my_test_model='test_value'

Not seeing expected Aria tags

I am trying to implement ngAria - have injected it in my module, Have the following html
First Name: <input role="textbox" type="text" ng-model="firstName" aria-label="First Name" required><br>
Employee: <input role="checkbox" type="checkbox" ng-model="isEmployee" arial-label="Employee" required>
I was expecting to see ngAria add aria-required, aria-checked and tabindex but it only adds aria-invalid. Is my understanding on ngAria wrong?
"<input role="textbox" type="text" ng-model="firstName" aria-label="First Name" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" aria-invalid="true">"
"<input role="checkbox" type="checkbox" ng-model="isEmployee" arial-label="Employee" required="" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" aria-invalid="false">"
NgAria automatically injects ARIA attributes for (some) default Angular directives.
This means for example: If you put ng-disabled on an element, it will inject aria-disabled at runtime.
In your case:
NgAria injects the aria-required attribute only if you add ng-required on your input. (By the way: It doesn’t matter if you put required or aria-required on your element. Both have the same effect on screen readers. So, your inputs are already correct marked as required)
The tabindex attribute only will be set automatically, if you put the ng-click directive on a by default, not clickable element. E.g.: div or span.
aria-invalid is put on the element because of the ng-model directive.
For a detailed overview of the supported directives and the associated ARIA attributes, have a look on https://docs.angularjs.org/api/ngAria

Add a prefix/suffix to value of input tag

I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this
<input ng-model="data" type="text" />
I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).
I haven't found any css/Angular tricks yet... any ideas?
Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.
For instance, if you do
<input type="text" value="prefixText {{name}} suffixText" ng-model="name">
The input box will display whatever is in name(with no prefix/suffix text)
However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.
<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">
Here's the demo
You can try this
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234">
<mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>
</form>
Demo

Clicking a checkbox using protractor

There is no unique model, id, label names. How am I suppose to check/click the checkboxes?
The html/code is:
<div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
uCPM
</label>
</div>
</div><div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
CPM
</label>
</div>
There is about 15 of these with the same name besides the label next to the name. I searched everywhere to see if protractor allows you to find elements by label.
My attempts are finding via by.buttonText, by.partialButtonText, by.css and by.binding. I have no luck on this.
My purpose is to pass in a label name that I can toggle the specific checkbox.
So it's like element(by.css(header)).click();
where header is what is passed in.
I strongly recommend using ids. Use a directive to add ids to each checkbox, then you can something like this:
element(by.css('input[myid="checkbox_x"]')); // where x is defined in a loop
I'm sure there will be better answer out there. I just started learning protractor :) You can try clicking on it by index.
3 = position.
element.all(by.repeater('column in $parent.columns.standardMetrics').get(3).element(by.css('[ng-model="column.visible"]')).click();
You can use by.xpath():
element(by.xpath('//input[#ng-model = "column.visible" and following-sibling::text() = "' + label + '"]'));
EDIT: missed that the text belonged to the label and not the input.
This should work:
element(by.xpath("//label[text()='uCPM']/input"));
Assign a dinamic id to the elements:
<div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label id="label{{$index}}" class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
uCPM
</label>
</div>
Then on protractor:
element(by.id('label0')).click();
p.s. Just read that you can't change HTML because the website is not yours. Try this:
var first= element.all(by.repeater('column in $parent.columns.standardMetrics')).get(0);
first.get(0).then(function(el) {
el.click();
});

Can I concatenate within a directive declaration in AngularJS?

I have a form with an ng-repeat directive. I'm using ng-show to display validation error messages. I'm attempting to add a validation message within the ng-repeat directive, but I'm having trouble. This is what I have so far:
<form name="rentalApp" ng-controller="RentalAppCtrl">
<label for="name">Full Name</label>
<input id="name" name="name" ng-model="app.name">
<div ng-show="rentalApp.name.$invalid">Please enter your name</div>
<div ng-repeat="history in app.history">
<label for="address{{ $index }}">Street Address</label>
<input id="address{{ $index }}" name="address{{ $index }}" ng-model="history.address">
<div ng-show="rentalApp.('address' + $index).$invalid">Please enter an address</div>
</div>
</form>
As you can see, I am using the $index variable to make sure my IDs and names are unique.
In the rest of my form I'm doing something along the lines of:
<div ng-show="rentalApp.whatever.$invald">Error Message</div>
What I'm having trouble with is that within the ng-repeat directive, the indexes are dynamic. I've been fiddling around with this for a while, and the closest I think I've gotten to a solution is this line:
<div ng-show="rentalApp.('address' + $index).$invalid">Please enter an address</div>
However that doesn't work.
How can I properly concatenate the word "address" with the $index variable, to create a string along the lines of address0, which can then be used in my ng-show directive to determine if the form element is invalid? Or, alternatively, am I going about this completely wrong (not the "Angular way")?
EDIT
I'm looking at the rentalApp object from the console, and AngularJS is not evaluating the name attribute as I would expect. Specifically, the rentalApp object contains a address{{ $index }} object, instead of address0. So it looks like I can't use the expression {{ $index }} within the name attribute.
UPDATE
I make a research and find out it is not possible to give dynamic value to name besides create a custom directive for it...
but there is a solution for you to validate dynamic form with ng-form directive for each individual ng-repeat element...
<div ng-repeat="history in app.history">
<ng-form name="addressForm">
<label>Street Address</label>
<input name="address" ng-model="history.address" ng-required="true">
<div ng-show="rentalApp['address' + $index].$invalid">Please enter an address</div>
<span class="alert error" ng-show="addressForm.address.$invalid">Please enter an address</span>
</ng-form>
</div>
and here is your PLUNKER...
Just put:
<input name="{{input.name}}"></input>

Categories

Resources