I am trying to create a form , where one text field value depends on another text box.
With reference to angularjs, By default xeditable update local model after clicking save.But i would like to update the model instantly and show the updated value in another text box
<span editable-text="user.name" e-ng-model="user.name" e-name="name"></span>
<span editable-text="user.username" e-ng-model="user.username" e-name="username"></span>
I have enclosed the sample working code in jsfiddle
#Pravin I think that I found a solution. I had the situation where I needs update the xeditable model when user select the dictionary entry on typeahead input. I was looking the solution and I found the following way:
<span editable-text="p.name" e-name="name" e-form="productForm" e-required
e-typeahead="product as product.name for product in getProducts($viewValue) | filter:$viewValue | limitTo: 8"
e-typeahead-editable="true" e-ng-maxlength="256" e-typeahead-focus-first="false"
e-typeahead-on-select='onSelectProductFromDictionary($item, $model, productForm)'>
{{ p.name }}
</span>
And the method which update the xeditable data:
$scope.onSelectProductFromDictionary = function ($item, $model, form) {
angular.forEach(form.$editables, function(editable) {
if (editable.name === 'name') {
return;
}
editable.scope.$data = $model.something; // this is a dictionary model
editable.save(); // move the value from edit input to view xeditable value
editable.hide(); // hide the specific xeditable input if you needs
});
};
I hope it helps.
UPDATE [JSFIDDLE]
https://jsfiddle.net/fLc2sdd2/
Its updating
check this
Working Demo
html
<h4>Angular-xeditable Editable form (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<form editable-form name="editableForm" onaftersave="saveUser()">
<div>
<!-- editable username (text with validation) -->
<span class="title">Name: </span>
<span editable-text="user.name" e-ng-model="user.name" e-name="name" e-required>{{ user.name || 'empty' }}</span>
</div>
<div>
<!-- editable username (text with validation) -->
<span class="title">User name: </span>
<span editable-text="user.username" e-ng-model="user.username" e-name="username" e-required>{{ user.username || 'empty' }}</span>
</div>
<div>
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editableForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
Cancel
</button>
</span>
<br> {{user}}
</div>
</form>
</div>
Related
My requirement:
I have to create a form row that has two select dropdowns and add and delete button at last
1. the first dropdown will have a list of values for ed.. ['one', 'two', 'three','four']
2. the second dropdown will have the condition ['and','or']
let say the first row of the form value selected like ['one'] ['and'] then clicking on the add button then the second row will create. here first dropdown should not show the 'one' value because the condition is 'and'. if user select or then it should all the values. similary for all the rows i have to create logic in angular.
HTML Code:
<div class="state-filter-conditions-grid subs-model-sec filter-grid" *ngFor="let filterCondition of filters; index as i">
<!-- OUTPUT PROPERTY -->
<ng-container *ngTemplateOutlet="filterView == 'subscription'? attrs: map; context: { index: i }"></ng-container>
<!-- CONNECTOR CONDITION -->
<div class="dt-attr valueCondition ctrl-condition minimal">
<div class="abs-cheveron select-box-cheveron">
<select class="state-select" [(ngModel)]="filters[i].op">
<option *ngFor="let val of op" [value]="val">{{val}}</option>
</select>
</div>
</div>
<!-- INPUT -->
<ng-container *ngTemplateOutlet="filterView != 'subscription'? attrs: map; context: { index: i }"></ng-container>
<!-- SELECT -->
<div class="dt-attr icons center-align">
<select class="ctrl-condition" *ngIf="!(i==filters.length-1)" [(ngModel)]="filters[i].logop" (change)="operatorChange(filters[i])">
<option *ngFor="let val of logop" [value]="val">{{val}}</option>
</select>
</div>
<!-- ICONS -->
<div class="dt-attr icons center-align">
<button *ngIf="i==filters.length-1" class="add-btn" (click)="addStateConditionRow()"><i
class="fa fa-sm fa-plus add-icon" aria-hidden="true"></i></button>
<button *ngIf="i>0" class="delete-btn" (click)="deleteStateConditionRow(i)"><i
class="fa fa-sm fa-trash delete-icon"></i></button>
</div>
</div>
<ng-template #attrs let-i="index">
<div class="dt-attr ">
<ng-container *ngIf="!dataProps">
<input class="ctrl-attr" type="text" [(ngModel)]="filters[i].value">
</ng-container>
<ng-container *ngIf="dataProps">
<select class="value-select" [(ngModel)]="filters[i].value">
<option *ngFor="let data of dataProps" [value]="data.attrId">{{data.attrName}}</option>
</select>
</ng-container>
</div>
</ng-template>
<ng-template #map let-i="index">
<div class="dt-attr ctrl-condition minimal">
<input class="ctrl-attr" type="text" clickOutside (clickOutside)="closeAccordion($event)" (click)="openAccordion($event)" [(ngModel)]="filters[i].attribute">
<div *ngIf="showAccordion" class="state-filter-accordion" style="position: absolute;
top: 105%;
width: 100%;z-index:1">
<app-common-accordion-mapping [filterInputRef]="filterInputRef" [inputAttributes]='inputAttributes' ></app-common-accordion-mapping>
</div>
</div>
</ng-template>
can you guys help me to achieve this.
Thanks in advance.
I think what you are looking for is to dynamically populate dropdown based on a particular logic. This stackoverflow answer covers that for AngularJS and a stackoverflow question + blog for Angular 8 . However I cannot help you with the business logic itself as it is not clear to me.
I use the [#ng-select/ng-select][1] component many places in my software. It works well, it searches by a backend method as the user types and shows the results for selection.
Now I would like to let the user to create new items that are not on the list. How can I do this with an async list? productNames is an Observable.
<ng-select [name]="'productname'+index$" [items]="productNames | async"
[attr.id]="'productname'+index$"
[(ngModel)]="detail.productNameNew"
[typeahead]="productNameInput"
(change)="productNameChanged($event, detail)"
(keydown)="productNameKeyPress($event, detail)"
[disabled]="currentSuggestion.acceptUser === null ? null : true"
[clearable]="false">
<ng-template ng-label-tmp let-item="item">
{{item.productName}}
</ng-template>
<ng-template ng-option-tmp let-item="item">
<div class="noproduct-item">
<div class="noproduct-head">
<div class="productname">{{item.productName}}</div>
<div class="description">{{item.description}}</div>
</div>
<div class="noproduct-details">
<div class="headid">
<span class='glyphicon glyphicon-send'></span>
{{item.suggestionHeadId}}
</div>
<div class="createduser">
<span class='glyphicon glyphicon-user'></span>
{{item.createUser?.name}}
</div>
<div class="createddate">
<span class='glyphicon glyphicon-calendar'></span>
{{item.createDate | date: 'yyyy.MM.dd.'}}
</div>
</div>
</div>
</ng-template>
</ng-select>
Add a second observable to capture the user added products and then use combineLatest to merge them. Subscribing to the combined list will produce a new list that you can use in the ng-select.
https://stackblitz.com/edit/angular-rxjs-combinelatest
I want to display a changed text value only if a Button has been clicked. The text value depends on an input field, and is dynamically bound to the input value of the text field with [(NgModel)]="textValue"...
I first enter some ID number into the input box and it directly changes my text. But I only want the text with the "ID-value" to change after I clicked the button, and called the new charts data with my function "getChartsData()".
This is how my html looks like:
<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1"
(click) = "getChartsData()"> Call HTTP Request
</button>
<br>
<div *ngIf="monatConst">Chart für Demonstrator mit ID: {{monatConst}} </div><br>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="dataArray"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
How can I best realize that the text with the ID field is only changed after clicking the button, and calling the new charts data? For the moment, I bound the ID variable two way with ngModel and put it directly into the text field with data binding {{..}}
I found a much simpler solution, it was pretty stupid from me ;) :
<div *ngIf="dataArray?.length>0; else noChartBlock">
Chart für Demonstrator mit ID: {{monatConst}}
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="dataArray"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>
<ng-template #noChartBlock>
<b>There is no data for Demonstrator with ID: {{monatConst}} !</b>
</ng-template>
I just packed my Text inside the ngIf selector so that it displays the text if something was found, otherwise it goes to the else template block... ;P
.html
<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1"
(click) = "getChartsData();setText(monatConst)"> Call HTTP Request
</button>
<br>
<div *ngIf="Demonstrator_ID">Chart für Demonstrator mit ID: {{Demonstrator_ID}} </div><br>
.ts
monatConst:any;
Demonstrator_ID: any;
setText(text){
this.Demonstrator_ID=text;
}
I have a view using a input text with uib-typeahead.
The input text is into a form.
When loading the view, the input text shows "[object Object]" about 5 seconds, before to be filled with the data loaded from remote server.
After the data to be loaded from remote server, all shows ok.
Is there a way to avoid this [object Object] into input text before the view is completelly loaded with the data from server?
I have tried ng-cloak but it has no effect.
//markup
<div class="col-sm-9 col-lg-9" id="scrollable-dropdown-menu">
<script type="text/ng-template" id="templatePac.html">
<div class="col-sm-12">
<a href>
<span ng-bind-html="match.model.nome | uibTypeaheadHighlight:query"></span>
<span> - CPF:</span>
<span ng-bind-html="match.model.cpf || 'sem cpf'"></span>
</a>
</div>
</script>
<input type="text" ng-model="paciente" required
uib-typeahead="item as item.nome for item in getPacientesByName($viewValue)"
ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0}}"
typeahead-editable="false" typeahead-select-on-exact="true" query="query" typeahead-wait-ms="300" typeahead-loading="loadingLocationsPac" typeahead-template-url="templatePac.html" typeahead-no-results="noResultsPac" class="form-control">
<div>
<i ng-show="loadingLocationsPac" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResultsPac">
<i class="glyphicon glyphicon-remove"></i> Sem resultados
</div>
</div>
</div>
//js controller
angular.module('clinang').controller('menuPacientesEvolAtendAddController', function($scope,$state,$http) {
$scope.paciente={primeiro_atendimento:{prescricao_adotada:{medicamentos:[]}}};
...
...
$scope.getPacientesByName=function(val){
return $http.get(urlBase+'/configuracao',{params:val}).then( (response)=>{
return response.data
}, (erro)=>{
console.log(erro);
})
}
}
Could you modify $scope.paciente initial value to have "nome", field according to typeahead value in input, so typeahead could parse it properly?
e.g.
$scope.paciente={nome: "", primeiro_atendimento:{prescricao_adotada:{medicamentos:[]}}};
I am writing a messaging app which has a delete / edit function for a user for a given message that is submitted. What I would like to do is write something like:
{{#if currentUser._id === this._id}}
<!-- Show -->
{{/if}}
But this is probably wrong I have a template written for the message record:
<template name="message">
<div class="row message-row">
<div class="col-md-12">
<div class="message-container">
<div class="message-avatar">
<img src="{{userAvatar}}">
</div>
<p>{{message}}</p>
<div class="message-time">{{prettifyDate time}}</div>
<!-- this is the div to hide / show based on the conditional -->
<div class="message-controls">
<button class="btn btn-link btn-xs" type="button" id="deleteMessage"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link btn-xs" type="button" id="editMessage"><i class="fa fa-edit"></i></button>
</div>
<!-- end -->
</div>
</div>
</div>
</template>
And I am using the following in my client.js
Template.messages.messages = function() {
return Messages.find({}, { sort: {time: -1} });
}
But at this point I am stuck
Assuming your message documents have a userId field, you can simply do this:
Template.message.helpers({
isOwner: function() {
return this.userId === Meteor.userId();
}
});
and:
{{#if isOwner}}
<!-- controls -->
{{/if}}
You could also make a more flexible, reusable global helper for this:
Template.registerHelper('isCurrentUser', function(userId) {
return userId === Meteor.userId();
});
<!-- in this example, the document might have an `ownerId` field rather than `userId` -->
{{#if isCurrentUser ownerId}}{{/if}}
Of course, you also need to validate the updates on the server with the allow/deny API or with custom methods.