I have a list of inputs created via ng-repeat. Initially all inputs are disabled except the first one. First input also have an active class (it's red in color because of active class) Planker
When I focus on the first input field 2nd input field becomes enabled with same active class. Same for others
So what I am trying to do is, if inputs have active class there will be a "placeholder text" on it. Without active class there should be no placeholder.
How I can add a placeholder dynamically on the input with active class ?
Code:
<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
<ul class="list-unstyled cs-tag-item-grp" ng-init="$parentIndex = $index">
<li class="clearfix" ng-repeat="value in item.csTags">
<div class="pull-left cs-tag-item-list">
<input ng-focus="focusItem($index, $parentIndex)" ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
</div>
</li>
</ul>
</div>
Thanks in advance.
You could set a placeholder on the input conditionaly, and If its true set to some value from the scope for example:
<input placeholder="{{value.active && !value.old ? placeholder : ''}}" ng-focus="focusItem($index, $parentIndex)" ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
// controller
$scope.placeholder = "something";
See this plunker.
You can add a function to the $scope and check for the active = true on your data model.
//controller
$scope.getPlaceholder = function (item) {
if(item.active){
return item.tags;
}
}
//view
<input ng-focus="focusItem($index, $parentIndex)"
placeholder="{{getPlaceholder(value)}}"
ng-disabled="!value.active"
ng-class='{active: value.active && !value.old}'
type="text" class="form-control input-sm">
I forked your Plink
Related
There is a scenario where I use ngfor and adding the text box for each iteration. When I type anything in the text box it binds to every text box but I want to give input to that text box only which I click to enter a value.
<div class="comment" *ngFor="let comment of blog.comments">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment.content" [ngModelOptions]="{standalone: true}">
</div>
You are referring same ngModel to every text box.
You need to have a array of newComment Objects.
<div class="comment" *ngFor="let comment of blog.comments;let i = index">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment[i].content" [ngModelOptions]="{standalone: true}">
</div>
This should be like this: event -> target-> value will give you current input value
Html:
<input (keyup)="onKey($event)">
Component TS
onKey(event: any) {
console.log(event.target.value)
}
This is my code
<ng-template #rowDetailsTmpl let-row="row">
<div class="row" style="padding: 10px 30px;">
<div class="col-sm-5 form-group">
<label> Add Operator </label>
<input type="string" id={{row.DeskId}} name={{row.DeskId}} (ngModelChange)="onChangeOperator($event)" class="form-control"
placeholder="Search Operator" [(ngModel)]="selectedOperatorEmail">
</div>
#ViewChild('rowDetailsTmpl', { static: true }) rowDetailsTmpl: TemplateRef<any>;
this._dataTableService.rowDetailsTemplate = this.rowDetailsTmpl;
In my code input text field using inside ng-template , i set id and name dynamically , but when i change value in textbox it automatically reflect to other input fields. so how to solve this problem in angular7.
in component define the model like array:
selectedOperatorEmail: Array<any> = [];
in html define ngModel define like this:
[(ngModel)]="selectedOperatorEmail[row.DeskId]"
I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.
https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts
HTML.component
<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
<span class="checkmark"></span>
</label>
</div>
<!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
<div class="col-md-8" >
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
</div>
Can anybody get this to work and show me what I am doing wrong here please?
You need to access the value of the form control:
*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">
STACKBLITZ
Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:
*ngIf="form.controls['selectedButton'].value === 'yes'"
Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"
Try like this:
Working Demo
.html
<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />
<div class="col-md-8" *ngIf="showTitle">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
.ts
onRadiochange(e) {
if(e.section == 'yes'){
this.showTitle = true
} else {
this.showTitle = false
}
}
It can also be done in one line like this:
<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />
Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.
In personal.component.ts, add this variable.
yesSelected: boolean = true;
Also in ngOnInit(),
this.form.valueChanges.subscribe(val=>{
if(val.radioButtonsGroup.selectedButton.section === "yes")
this.yesSelected = true;
else
this.yesSelected = false;
});
In personal.component.html, rewrite your if condition like this.
<div class="col-md-8" *ngIf="yesSelected">
<input type="text" formControlName="title" placeholder="Title">
</div>
These changes will show the title textbox only when the yes check box is selected.
I have $scope.getmaindata list with 5 objects, in each object i have a list contain multiple values which user achieved. And $scope.myproviders contain levels with id and level name. I want to check the multiple values of each user corresponded to that service when id matches. and if user have level 3 in his list i have to show the input box next to it. I tried some answers in stackoverflow but none of them solved my issue.The problem i am getting with code is when the levelsqualified list of the each user is not in the order, so i thought i have to write a for loop and wrote but not succeeded.
Here is the working plunkr with more code Plunkr v1
Update
The values are binding for the first time with $scope variables but when i uncheck some of them levelsqualified list of each user is not updated
Plunkr v2
<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata">
<ul class="list-inline">
<h4>{{mydata.firstname}}</h4>
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]==providers.level">
{{providers.level}}
</label>
</span>
</li>
<li>
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
</ul>
</div>
Extending on #Randi Radcliff's plunker, this plunker might do the trick.
On the ng-checked just did:
ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"
I believe you need to change your ng-checked (if I am understanding you correctly).
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]">
{{providers.level}}
</label>
and you need to add an ng-if for your input box like so:
<li ng-if="mydata.levelsqualified[$index]==3">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I hope this is what you needed.
EDIT
I changed the Plunker to incorporate both answers and a little hacking. I added an ng-change event and changed your ng-model. See Below:
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1">
{{providers.level}}
</label>
</span>
</li>
<li ng-if="mydata.levelsqualified.indexOf(3) > -1">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I also added the following function:
$scope.addCheckChoice = function (c, p) {
var main = $scope.getmaindata.indexOf(c);
var idx = c.levelsqualified.indexOf(p.id);
if (c.selected === true) {
c.levelsqualified.push(p.id);
alert("You selected " + p.id + " for " + c.firstname);
}
else {
c.levelsqualified.splice(idx, 1);
alert("You removed " + p.id + " for " + c.firstname)
}
for (var i = 0; i < c.levelsqualified.length; i++) {
for(var x = 0; x < $scope.myproviders.length; x++){
if (c.levelsqualified[i] == $scope.myproviders[x].id) {
c.selected = true;
}
}
}
}
If this isn't what you need, let me know. You may need to do a little tweaking.
In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.