First, I've looked through other questions and not found an answer.
I have a custom directive with a two attributes: multiValue and ngModel. Both of these values are represented in the controller as $scope.multiValue and $scope.ngModel.
The behavior of the directive changes based on the value of $scope.ngModel. In both cases, the directive creates an input and an image:
<input id="{{controlId}}" name="{{controlId}}" placeholder="Select Value(s)"
class="k-textbox" type="text" ng-model="ngModel" />
<img ng-src="/img/X.png" ng-click="clear()"
ng-show="multiValue == false && ngModel === ''" />
The purpose of the image is to show an "X" icon to clear the value represented by $scope.ngModel. However, when $scope.multiValue is true, the X icon does not need to display. When $scope.multiValue is false and a value has been selected, the X icon needs to display.
I have tried multiple means to get the X to disappear when multiValue is false or a value has not yet been selected:
Tried both "src" and "ng-src"
Tried combinations of ng-if and ng-show (including the ones above)
Tried using the condition ability of ng-src to define the image to show based on the same condition shown in the prior example.
Help would be greatly appreciated.
Could you please use <ng-if=""> Instead of <ng-show="">.
I am not sure of is this helpful. But I have faced similar issues that time I used <ng-if="">
You have not mentioned about which version of Angular you are using.
However, in Angular 6 or 7 you can use
*ngIf="multiValue == false && ngModel === ''"
Hope this will help you
Related
Iam a pretty new in Angular , please help with the following code in Angular.
We have a special window which checks the customer data. You put special bill number and then POPup will show and you must enter the card number. But when we put incorrect card number to the input field (which he cant find in backend), the POPup dissepares and it shouldn't work this way. The POPup window should stay and you can put another card number for checking the card. I guess the problem is with validation may be Im not sure but I guess the valdiation is related to [class.notvalid]
But I dont know the meaning of the code [class.notvalid]. Please explain if you can the meaning of the [class.notvalid]
I have a Angular CLI: 8.3.5 versioun . It was hard to me to try to correct the code as I cant understand some modules in Angular
transfer.html
<p class="input-label" [translate]="'page.transfers.RECIPIENT_IIN_BIN'" [class.notvalid]="iin && !finn?.valid">IIN/BIN of customer</p>
<div class="input-w"
[class.input-w-error]="recipient !== undefined && !recipient.success">
<input type="tel" maxlength="12" class="input"
#finn="ngModel"
[(ngModel)]="iin"
(keyup)="searchRecipientOtherBank(iin, iban)"
[class.notvalid]="iin && !finn?.valid"
pattern="^[0-9]{0,12}$"
require/>
</div>
</div>
I expect that when you put the card number the POPup will not dissaper and you can try to put another number
[class.input-w-error] and [class.notvalid] are angular directives to access css classes in the format -("class.css-class-name").
The class is used when the condition assigned evaluates true.
In the code above-
[class.notvalid]="iin && !finn?.valid"
.notvalid class is added to the classes if iin && !finn?.valid evaluates true.
I've two text boxes with different ng-models. They fill up using a $http.get request on click of a button.
Lets say:
<input type="text" ng-model="name.title" />
<input type="text" ng-model="name.surname" />
These get filled up just fine from my JSON data.
The value of my name.title can sometimes be like "abc (123)". If a user edits this, I want the name.surname to become the part inside the (). If the user removes "abc (123)" and just types in 123, then 123 should reflect in name.surname.
I've tried various combinations using ng-blur and ng-change but nothing so far has worked for me.
Its just one two textboxes so no point writing a new directive.
How do I do this?
Any help will be appreciated. :)
I asume that your using angular 1.x.
You could have a watch over name.
something like in you
$scope.$watch('[name.title, name.surname]', function(newValue, prevValue) {
if (newValue === prevValue) {
return;
}
//Here you put your logic and update the models.
});
If I assign max-tags="1", it working perfectly but when I tried to assign dynamically by using max-tags="maxtag()",through link function, but it is showing red border for input box. From view I am trying to put max number of tags. Everything is working fine, but input box is red,
It is showing like following text image. Like warning. How to fixed it.
Working Demo
http://plnkr.co/edit/ooTucE4yqmLwMH9kNkO7?p=preview
<tags-input ng-model="modeldisplay" class="input-md" display-
property="data" on-tag-removed="removedCustomerTag()"
placeholder="Select a User" on-tag-adding="addSearchedTag()" on-tag-added="tagAdded($tag)"
enable-editing-last-tag="removedCustomerTag()" replace-spaces-with-dashes="false" max-tags="maxtag()"
add-from-autocomplete-only="true">
<auto-complete source="loadTags($query)" min-length="1" load-on-focus="true" load-on-empty="true"
max-results-to-show="10" template="autocomplete.html">
</auto-complete>
</tags-input>
Most options of ngTagsInput are simply DOM attributes, thus you should use interpolation in order to dynamically change them:
<tags-input ng-model="modeldisplay" max-tags="{{maxtag}}" ...></tags-input>
That would work, but not quite as one might expect. To keep the number of watches as low as possible, ngTagsInput doesn't actively monitor DOM attributes by default, so the {{maxtags}} expression above is evaluated only once. In your case, that seems to be enough. But if it isn't, you can change that behavior by using the tagsInputConfigProvider service in your module`s config block:
app.config(function(tagsInputConfigProvider) {
tagsInputConfigProvider.setActiveInterpolation('tagsInput', {
maxTags: true
});
});
You can learn more about that on ngTagsInput documentation.
Finally, here is your updated Plunker.
I have encountered the following odd behavior when using radio buttons.
What I wanted to accomplish:
If array is undefined - choose Radio Button 1.
When the array is defined, choose Radio Button 2.
Initial state - the array is undefined.
function MainCtrl($scope){
$scope.model = {}; };
The behavior i've encountered:
If I use ng-model + value + ng-checked on both radio buttons -
everything works as expected. Fiddle: http://jsfiddle.net/34dT9/
If i use ng-checked + NO ng-model + NO value - everything works as
expected.
However, if i use ng-model + ng-checked + NO value - NONE of the
radio buttons are select, despite the condition for radio button
being evaluated to TRUE. Fiddle: http://jsfiddle.net/34dT9/1/
My assumption is that the behavior due to the fact that AngularJS documentation (https://docs.angularjs.org/api/ng/input/input%5Bradio%5D) seems to state that the element must have ng-model and value set, but ng-change is optional. However, one of the test cases above, shows that using just ng-change (without the seemingly mandatory attributes/directives) produces the desired behavior.
I am having hard time understanding this behavior and will be glad someone will be able to explain it to me.
Thanks in advance
I know I am late.
I have changed the condition from
<input type="radio" ng-model="model.permissions" name="fooradio" ng-checked="model.permissions == null"> Radio 1
<input type="radio" ng-model="model.permissions" name="fooradio" ng-checked="model.permissions != null"> Radio 2
to
<input type="radio" ng-model="model.permissions" name="fooradio" ng-checked="model.permissions === null"> Radio 1
<input type="radio" ng-model="model.permissions" name="fooradio" ng-checked="model.permissions !== null"> Radio 2
I am checking the value strictly here with (=== & !==) which will check the type as well.
Please find the working jsfiddle for third scenario.
I have a <select> element that uses ng-options to generate the select list and hopefully set the selected to the value of the ng-model. Here is my html:
<td style="text-align:center">
<ng-form name="IsTobaccoForm">
<select name="Input" required ng-model="dep.IsTobacco" ng-options="item.value as item.text for item in yesNoList"></select>{{dep.IsTobacco}}
<span class="alert-error" ng-show="IsTobaccoForm.Input.$error.required"><strong>*Required</strong></span>
</ng-form>
</td>
My controller contains the following code:
$scope.yesNoList = [{ value: true, text: 'Y' }, { value: false, text: 'N'}];
If the IsTobacco value of the item is true, the value is set properly and everything is fine. However, if it is false, the required error appears, even though {{dep.IsTobacco}} renders as false. The really weird part is that if I change the selected item in the list to true, it works fine, however if I set it to false, a new blank item is added to the list and that blank item is selected.
If it seems like the issues do not lie in the lines posted above, I could gladly post more code.
Thanks!
EDIT: I also used chrome debugger and saw that when the data was being initiated in Angular, the value of IsTobacco was equal to false.
Edit 2: If anyone viewing this is new to AngularJS, I would definitely recommend reading these 2 articles: part 1 & part 2. They are an overview of AngularJS forms.
The reason this happens is because a value of false gets interpreted as a lack of ngModel when used with required. As discussed here, consider this excerpt from the Angular source:
var validator = function(value) {
if (attr.required && (isEmpty(value) || value === false)) {
ctrl.$setValidity('required', false);
If there is a required attribute and its value is false, it does not pass validation. This is probably intentional for the sake of more easily validating required checkboxes, in which case the default value for unchecked is false.
It may not need to be this way, considering that checkboxes can take ng-true-value and ng-false-value attributes but I guess it was either do this or enforce the use of non-true and non-false values for those attributes on every checkbox, and this was the better choice.
One workaround would be to use the strings 'true' and 'false' instead.