I have the following code for generating the tags in ng-tags-input
$scope.loadTags = function () {
return $q(function (resolve, reject) {
resolve(vm.campusesList);
})
}
Inside the vm.campusesList array I have multiple objects containing multiple properties. What I want is to take the name property from each object and use that in autocomplete tag.
Here is my view.
<tags-input ng-model="vm.campusesList">
<auto-complete source="loadTags()"></auto-complete>
</tags-input>
You need to write the property name you want the text in autocomplete fashion.I have written code for you below. display-property="name" inside plays the role in search where as key-property="name" will accept the repeated name in your list if any. For further clarity or help post your JSON Response. Enjoy!!
<tags-input name="campusesListAutocomplete"
ng-model="vm.campusesList"
display-property="name"
key-property="name"
highlight-matched-text="true">
<auto-complete source="loadTags($query)"/>
</tags-input>
Related
I am using Blazor Text Editor from source below.
Source - https://github.com/Blazored/TextEditor
I successfully integrated it with my create and edit form, however not able to bind-Value to it. Because of this my Data Annotation Validation is failing.
Internally blazor is using Quill Editor, I am not looking for javascript option.
Sample Code of editor
<BlazoredTextEditor #ref="#QuillNative" Placeholder="Enter non HTML format like centering...">
<ToolbarContent>Some editor stuff here</ToolbarContent>
<BlazoredTextEditor
Could anyone please help me. How to bind-Value or correct approach without javascript.
Vencovsky - thanks of you prompt response, I was already aware of these methods however was curious to know if anybody had tried different option.
Below is what I did..
FORM -- This is common form for create & edit. OnValidSubmit will call respective Create/Edit method.
<EditForm Model="Entity" class="contact-form" OnValidSubmit="OnValidSubmit">
//My form fields here
//Commented the validation from that particular field
#*<ValidationMessage For="#(() =>Entity.field)" />*#
<div class="col-sm-1">
<button type="submit" #onclick="***getEditorData***" class="btn"
style="border:2px solid #555555;"><span>Save</span></button>
</div>
</EditForm>
METHOD -- getEditorData() gets fired before OnValidSubmit()
public async void getEditorData()
{
Enity.field = await this.QuillNative.GetHTML();
}
So in my final Entity on OnValidSubmit() I receive all fields along with editor data..
Hope this help if anyone is trying to do so..
Apparently you can't bind a value to it, but you should use the provided methods
Methods
GetText - Gets the content of the editor as Text.
GetHTML - Gets the content of the editor as HTML.
GetContent - Gets the content of the editor in the native Quill JSON Delta format.
LoadContent (json) - Allows the content of the editor to be programmatically set.
LoadHTMLContent (string) - Allows the content of the editor to be programmatically set.
InsertImage (string) - Inserts an image at the current point in the editor.
To use these methods you need a reference of it
#* Getting the BlazoredTextEditor reference*#
<BlazoredTextEditor #ref="#BlazoredTextEditorRef">
#* rest of the code*#
</BlazoredTextEditor>
And in some code in your class you can do
void LoadData(){
//var html = BlazoredTextEditor.LoadHTML(SomeDataToLoad)
BlazoredTextEditor.LoadText(SomeDataToLoad)
}
void ValidateData(){
//var html = BlazoredTextEditor.GetHTML()
var text = BlazoredTextEditor.GetText()
// do something to validate text
}
You can call these methods and use the referece in other methods, this is just an example on how to do it.
here is how I did this:
1- to bind the value on load:
<BlazoredTextEditor #ref="#QuillHtml">
<EditorContent>
#((MarkupString)infoBlock.Description)
</EditorContent>
</BlazoredTextEditor>
to get value on submit
<EditForm Model="infoBlock" OnValidSubmit="LocalOnValidSubmit">
...
#code {
....
[Parameter] public EventCallback OnValidSubmit { get; set; }
BlazoredTextEditor QuillHtml = new BlazoredTextEditor();
private async Task LocalOnValidSubmit()
{
infoBlock.Description = await this.QuillHtml.GetHTML();
await OnValidSubmit.InvokeAsync(this);//to call event handler passed by parent after the HTML prepared for main bound class
}
}
I have an Angular Dart page where I need to create a component on the screen for each item in a collection. The items are custom model objects:
class CohortDataSourceAssay{
String name;
String displayName;
bool selected;
List<String> platforms = new List<String>();
CohortDataSourceAssay();
}
I have a parent page where I want to create a template for each element in a collection of the class above:
<data-source-assay *ngFor="let assay of dataSource.assays"></data-source-assay>
Here is the markup for the data-source-assay component:
<div class="dataSourceAssay">
<material-checkbox [(ngModel)]="assay.selected" (ngModelChange)="onCbxChange($event)">{{assay.displayName}}</material-checkbox>
<material-dropdown-select class="selectStyle"
[disabled]="!assay.selected"
[buttonText]="platformLabel"
[selection]="assaySequencingPlatforms"
[options]="sequencingPlatforms"
[itemRenderer]="itemRenderer">
</material-dropdown-select>
</div>
This works insofar as it loads a block for each assay element in dataSource.assays, however the assay block does not appear to get the assay model object. It appears to be null. How do I pass it in?
You need to declare an #Input() on your <data-source-assay> component, through which you can pass the assay value.
#Component(...)
class DataSourceAssayComponent {
// An input makes this property bindable in the template via []
// notation.
//
// Note: I'm not actually sure what the type of `assay` is in your
// example, so replace `Assay` with whatever the correct type is.
#Input()
Assay assay;
}
Now in your template where you create this component, you can bind the assay value to the input.
<data-source-assay
*ngFor="let assay of dataSource.assays"
[assay]="assay">
</data-source-assay>
Remember that the local values in a template are local to that template. Meaning the assay you were declaring in your ngFor isn't visible anywhere outside of that current template.
Is the left over text in input accessible programatically? If so, how?
I only allow tags from autocomplete (to use as search filters), and want to use the left over text as additional keywords, meaning I want to know if it's bound to anything so I can pass it to a search function.
Thanks for the help
That's not directly possible, but you can hack into the directive and make it work by using a helper directive:
app.directive('bindInternalInputTo', function() {
return function(scope, element, attrs) {
var property = attrs.bindInternalInputTo,
input = element.find('input'),
inputScope = input.scope();
inputScope.$watch('newTag.text', function(value) {
scope[property] = value;
});
};
});
Now you can bind some variable in the outer scope to the inner input by doing the following:
<tags-input ng-model="tags" bind-internal-input-to="variable"></tags-input>
Working Plunker
Please note that this solution isn't guaranteed to work with future versions of ngTagsInput since it relies on internal implementation details.
I have taken the codes shared from the Modal example page and instead of an LI I have decided to use a select element. My select element has ng-model="selectedColor" in it, and I can use {{selectedColor}} all over the partial I created, however, I can not use "$scope.selectedColor" from the "Model Instance Controller" or any controller for that matter. I assume this is because something is off with $scope but I cant seem to figure it out. Any help is appreciated.
http://plnkr.co/edit/MsNBglLJN0hWxvGZ1pj1?p=preview
The problem in your code is that $scope.selectedColor and the selectedColor in the modal markup are two different references. For details on this, please read Understanding Scopes, you will probably benefit from it as it is a common task.
Instead of writing $scope.selectedColor, you should make an object in your controller, then store the result in it.
var ModalInstanceCtrl = function ($scope, $modalInstance, colors) {
$scope.colors = colors;
$scope.o = {}
$scope.ok = function () {
console.log($scope.o.selectedColor, "$scope.o.selectedColor");
$modalInstance.close($scope.o.selectedColor);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
and in the markup, refer to o.selectedColor.
Here is a working version of your Plunker
Hi friends i am trying to create facebook like pagination in struts2
what i am trying is at the end of the webpage i am calling action class using javascript ajax using below code
<script>
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
console.log("Bottom reached");
var ul = $('.ullist');
var start = ul.children().length;
$.post("postImage.action?", { start: start }, function(session2) {
// Here I am getting json data
alert("inside class " + session2);
});
} else {
console.log("Bottom reached not");
}
});
</script>
The problem is that I have already a list using iterator. Please tell me how to append the value to iterator.
<s:iterator value="#session.list">
.......//here i already have data
</s:iterator>
You don't "append data to the iterator", you append DOM elements to the DOM.
You have two main options:
Return rendered HTML and append it at the end of the page (wherever is appropriate in your DOM), or...
Return JSON (or XML or whatever) and build the DOM dynamically on the client side.
You already have a JSP that renders the same type of information, I'd re-use that chunk of JSP, return rendered HTML, and append it. That said, there are countless jQuery bottomless pagination examples and many plugins–I'd probably just pick one that gets you started and take it from there, and use whatever mechanism your choice uses.