I'm exploring the sap.f.ProductSwitch controller on a sample project sap.f.sample.ShellBarProductSwitch.
Everything is clear besides one thing, what should be the approach if I want to provide an i18n support for a list of products (model/data.json)?
E.g. additionally to the hardcoded English list of products:
{
"items": [
{
"src": "sap-icon://home",
"title": "Home"
}
]
}
I want to provide a Frech one:
{
"items": [
{
"src": "sap-icon://home",
"title": "Maison"
}
]
}
With a basic dialogues I can rely on the built-in i18n UI5-engine, but here I don't know how to enable i18n in an XML-template:
<f:ProductSwitchItem
src = "{src}"
title = "{title}" />
A home-made solution.
XML-template:
<f:ProductSwitchItem
src = "{src}"
title = "{titleI18NKey}" />
Controller:
const resourceBundle = this.getView().getModel("i18n").getResourceBundle();
const productSwitcherModelData = this.getView().getModel("productSwitcher")?.getData();
productSwitcherModelData.items.forEach((item) => {
item.titleI18NKey = resourceBundle.getText(item.titleI18NKey);
});
this.productSwitcher.setModel(this.getView().getModel("productSwitcher"));
In product switcher model instead of real text I store a key-value pair:
titleI18NKey: i18n_dialogue_key
which is later replaced by the end-text from the i18n-model and set to the productSwitcher model.
P.S. Please, let me know, if there is more elegant implementation based on UI5 functionality.
If you like the data binding approach better, you can use a formatter with the title property binding to retrieve the text from the resource model.
The key to the text of the resource bundle must be defined in your data.json for every item:
The JSON data model:
{
"items": [
{
"src": "sap-icon://home",
"titleI18NKey": "myResourceBundleKeyToThisItem"
}
]
}
The XML-template:
<ProductSwitch
change = "onClickProductSwitcherItem"
items = "{
path: '/items'
}">
<items>
<ProductSwitchItem
src = "{src}"
title = "{
path: 'titleI18NKey',
formatter: '.getText'
}" />
</items>
</ProductSwitch>
The formatter getText needs to be defined in your controller:
getText(i18nKey) {
const dialogue = this.getView().getModel("i18n").getProperty(i18nKey);
return dialogue;
}
If you only have static values I would rather not use list binding but create the product switch items individually:
<ProductSwitch change="fnChange" >
<items>
<ProductSwitchItem src="sap-icon://retail-store" title="{i18n>Title_1}" />
<ProductSwitchItem src="sap-icon://family-care" title="{i18n>Title_2}" />
</items>
</ProductSwitch >
In doing so you can use the resource model for the titles as usual and don't need any further code.
Related
I want to add some extra language features, such as liquid language support inside JavaScript:
var firstName = "<% User.firstName %>";
var lastName = "<% User.firstName %>";
I browsed around a bit and I found this folder in the vscode repository: https://github.com/microsoft/vscode/tree/main/extensions/javascript
It's basically the JavaScript tmLanguage grammar rules, so I had this idea to create a new javascript file format (.pjs) and apply the same tmLanguage file as well as add these new rules:
"pk-liquid-expression": {
"begin": "<%",
"beginCaptures": {
"0": {
"name": "storage.type.primitive.java"
}
},
"end": "%>",
"endCaptures": {
"0": {
"name": "storage.type.primitive.java"
}
},
"name": "storage.type.primitive.java"
},
And this worked, however now my pjs files don't have any of the language features such as errors and warnings.
I think my solution is not very forward-thinking however, so is it possible to just edit the current JavaScript tmLanguage rules and add these new tokens?
Thank you.
One solution is to inject the "liquid language" into the Javascript language definition. Main steps for that is to define a grammar to inject and creating a selector which defines when to inject your grammar:
{
"contributes": {
"grammars": [
{
"path": "./syntaxes/injection.json",
"scopeName": "todo-comment.injection",
"injectTo": ["source.js"]
}
]
}
}
See also: How to properly inject grammar extension in vscode (so it works)?
I have the following Problem:
I want to develop a shopping cart and have problems with the counter of the product card and I have problems to show the data in the summary view.
For this project I use XML views and I've already readed a lot about binding. When I want to bind a static path I have no problems. The data comes from a JSON model named "cartData".
Example (from the goToCart Button)
...
text="{cartData>/currentUser}";
...
Everything shows correctly (in the example), but for my project I need to bind a main binding (for counter of the cart) and this path need a parameter for the user. Which is saved at the path like in the example.
I've already tried a lot of combinations to accomplish this bug, but now I have no more ideas :-(
A example of my tried combinations:
text="{ ${cartData>/cartOfUser/} + {cartData>/currentUser} + '/roles/counter'}"
EDIT:
Some dummy parts of my code:
My Button (doen't work yet how I need...):
<m:Button
id="details.Btn.ShowCart"
text="{ parts: [
{path: 'cartProducts>/cartEntries/'},
{path: 'cartProducts>/currentChoice/'},
{path: '/addedRoles/counter'}
]}"
type="Emphasized"
icon="sap-icon://cart-3"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
iconDensityAware="false"
press="showCart"/>
How my JSON Model in LocalStorage look like:
{
"cartEntries": {
"counter": 2,
"UserId12": {
"UserId": "UserId12",
"Email": "Email12",
"dateCreated": "2017-07-14T13:18:13.632Z",
"dateUpdated": "2017-07-14T13:18:13.632Z",
"addedRoles": {
"counter": 0
},
"existingRoles": {
"counter": 0
}
},
"UserId14": {
"UserId": "UserId14",
"Email": "Email14",
"dateCreated": "2017-07-14T13:18:30.415Z",
"dateUpdated": "2017-07-14T13:18:30.415Z",
"addedRoles": {
"counter": 0
},
"existingRoles": {
"counter": 0
}
}
},
"currentChoice": "UserId14"
}
My JSON Data with comment:
I need to grab the value from "currentChoice", to search with this information in cartEntries for the right counter
How the Button look now:
It show the data not in the correct way. Please ignore the zero at first...
The goal is to take the value of "currentChoice" and use it as a 'parameter' to call the information for the right user..
What I also tried:
text="{= ${= 'cartProducts>/cartEntries/' + ${cartProducts>/currentChoice/} + '/addedRoles/counter' } }"
What works, but I need it more "dynamic" is:
text="{cartProducts>/cartEntries/UserId14/addedRoles/counter}"
I hope you guy's now know what I mean... :-/
Best regards
The Solution
How I solve the problem:
Add a formatter to the button:
/',
formatter: '.formatter._getCartInt'
}"
type="Emphasized"
icon="sap-icon://cart-3"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
iconDensityAware="false"
press="showCart"/>
Implement the formatter in my formatter.js file:
_getCartInt: function (sP1) {
var sCurrent = sP1.currentChoice;
var sFinalString = "cartProducts>/cartEntries/" + sCurrent + "/addedRoles/counter";
this.getView().byId("btn.ShowCart").bindProperty("text",{path: sFinalString, type: new sap.ui.model.type.Integer()}); }
Try to use the following approach:
in i18n file:
cartInfoTitle=User: {0} has: {1} items in the cart
in XML view:
<Text text="{
parts: [
{path: 'i18n>cartInfoTitle'},
{path: 'modelName>/property1'},
{path: 'modelName>/property2'}
],
formatter: 'jQuery.sap.formatMessage'
}" />
So you declare the i18n entry and then use the predefined formatter to replace the placeholders with the values from the "parts" array (Documentation article).
Ok so to answer : you cannot use expression in a binding (same applies for classes). So to have the output you want you will indeed need a formatter + include the needed top level elements of your JSON model in the binding parts (so that it updates properly).
XML (I assume your model is called 'cartData')
<Text text="{
parts: [
'cartData>/cartEntries',
'cartData>/currentChoice'
],
formatter: '.myFormatter'
}" />
JS Controller
controller.prototype.myFormatter = function (cartEntries, currentChoice) {
if (cartEntries && cartEntries[currentChoice]) {
return cartEntries[currentChoice].addedRoles.counter;
}
}
[code not tested]
At the company I’m working for, we’re developing a large scale application with multiple forms, that the user needs to fill in in order to register for our program. When all questions have been answered, then the user reaches a section that sums up all their answers, highlights invalid answers and gives the user the chance to revisit any of the preceding form steps and revise their answers. This logic will be repeated across a range of top-level sections, each having multiple steps/pages and a summary page.
To accomplish this, we have created a component for each separate form step (they are categories like “Personal Details” or “Qualifications” etc.) along with their respective routes and a component for the Summary Page.
In order to keep it as DRY as possible, we started creating a “master” service which holds the information for all the different form steps (values, validity etc.).
import { Injectable } from '#angular/core';
import { Validators } from '#angular/forms';
import { ValidationService } from '../components/validation/index';
#Injectable()
export class FormControlsService {
static getFormControls() {
return [
{
name: 'personalDetailsForm$',
groups: {
name$: [
{
name: 'firstname$',
validations: [
Validators.required,
Validators.minLength(2)
]
},
{
name: 'lastname$',
validations: [
Validators.required,
Validators.minLength(2)
]
}
],
gender$: [
{
name: 'gender$',
validations: [
Validators.required
]
}
],
address$: [
{
name: 'streetaddress$',
validations: [
Validators.required
]
},
{
name: 'city$',
validations: [
Validators.required
]
},
{
name: 'state$',
validations: [
Validators.required
]
},
{
name: 'zip$',
validations: [
Validators.required
]
},
{
name: 'country$',
validations: [
Validators.required
]
}
],
phone$: [
{
name: 'phone$',
validations: [
Validators.required
]
},
{
name: 'countrycode$',
validations: [
Validators.required
]
}
],
}
},
{
name: 'parentForm$',
groups: {
all: [
{
name: 'parentName$',
validations: [
Validators.required
]
},
{
name: 'parentEmail$',
validations: [
ValidationService.emailValidator
]
},
{
name: 'parentOccupation$'
},
{
name: 'parentTelephone$'
}
]
}
},
{
name: 'responsibilitiesForm$',
groups: {
all: [
{
name: 'hasDrivingLicense$',
validations: [
Validators.required,
]
},
{
name: 'drivingMonth$',
validations: [
ValidationService.monthValidator
]
},
{
name: 'drivingYear$',
validations: [
ValidationService.yearValidator
]
},
{
name: 'driveTimesPerWeek$',
validations: [
Validators.required
]
},
]
}
}
];
}
}
That service is being used by all the components in order to set up the HTML form bindings for each, by accessing the corresponding object key and creating nested form groups, as well as by the Summary page, whose presentation layer is only 1way bound (Model -> View).
export class FormManagerService {
mainForm: FormGroup;
constructor(private fb: FormBuilder) {
}
setupFormControls() {
let allForms = {};
this.forms = FormControlsService.getFormControls();
for (let form of this.forms) {
let resultingForm = {};
Object.keys(form['groups']).forEach(group => {
let formGroup = {};
for (let field of form['groups'][group]) {
formGroup[field.name] = ['', this.getFieldValidators(field)];
}
resultingForm[group] = this.fb.group(formGroup);
});
allForms[form.name] = this.fb.group(resultingForm);
}
this.mainForm = this.fb.group(allForms);
}
getFieldValidators(field): Validators[] {
let result = [];
for (let validation of field.validations) {
result.push(validation);
}
return (result.length > 0) ? [Validators.compose(result)] : [];
}
}
After, we started using the following syntax in the components in order to reach the form controls specified in the master form service:
personalDetailsForm$: AbstractControl;
streetaddress$: AbstractControl;
constructor(private fm: FormManagerService) {
this.personalDetailsForm$ = this.fm.mainForm.controls['personalDetailsForm$'];
this.streetaddress$ = this.personalDetailsForm$['controls']['address$']['controls']['streetaddress$'];
}
which seems like a code smell in our inexperienced eyes. We have strong concerns how an application like this will scale, given the amount of sections we'll have in the end.
We’ve been discussing different solutions but we can’t come up with one that leverages Angular’s form engine, allows us to keep our validation hierarchy intact and is also simple.
Is there a better way to achieve what we’re trying to do?
I commented elsewhere about #ngrx/store, and while I still recommend it, I believe I was misunderstanding your problem slightly.
Anyway, your FormsControlService is basically a global const. Seriously, replace the export class FormControlService ... with
export const formControlsDefinitions = {
// ...
};
and what difference does it make? Instead of getting a service, you just import the object. And since we're now thinking of it as a typed const global, we can define the interfaces we use...
export interface ModelControl<T> {
name: string;
validators: ValidatorFn[];
}
export interface ModelGroup<T> {
name: string;
// Any subgroups of the group
groups?: ModelGroup<any>[];
// Any form controls of the group
controls?: ModelControl<any>[];
}
and since we've done that, we can move the definitions of the individual form groups out of the single monolithic module and define the form group where we define the model. Much cleaner.
// personal_details.ts
export interface PersonalDetails {
...
}
export const personalDetailsFormGroup: ModelGroup<PersonalDetails> = {
name: 'personalDetails$';
groups: [...]
}
But now we have all these individual form group definitions scattered throughout our modules and no way to collect them all :( We need some way to know all the form groups in our application.
But we don't know how many modules we'll have in future, and we might want to lazy load them, so their model groups might not be registered at application start.
Inversion of control to the rescue! Let's make a service, with a single injected dependency -- a multi-provider which can be injected with all our scattered form groups when we distribute them throughout our modules.
export const MODEL_GROUP = new OpaqueToken('my_model_group');
/**
* All the form controls for the application
*/
export class FormControlService {
constructor(
#Inject(MMODEL_GROUP) rootControls: ModelGroup<any>[]
) {}
getControl(name: string): AbstractControl { /etc. }
}
then create a manifest module somewhere (which is injected into the "core" app module), building your FormService
#NgModule({
providers : [
{provide: MODEL_GROUP, useValue: personalDetailsFormGroup, multi: true}
// and all your other form groups
// finally inject our service, which knows about all the form controls
// our app will ever use.
FormControlService
]
})
export class CoreFormControlsModule {}
We've now got a solution which is:
more local, the form controls are declared alongside the models
more scalable, just need to add a form control and then add it to the manifest module; and
less monolithic, no "god" config classes.
Your approach and Ovangle's one seem to be pretty good but even though this SO question is solved, I want to share my solution because it's a really different approach that I think you might like or might be useful to someone else.
what solutions there are for an app wide form where Components take care of different sub parts to the global form.
We've faced that exact same issue and after months of struggling with huge, nested and sometimes polymorphic forms, we've come up with a solution that pleases us, which is simple to use and which gives us "super powers" (like type safety within both TS and HTML), access to nested errors and others.
We've decided to extract that into a separated library and open source it.
Source code is available here: https://github.com/cloudnc/ngx-sub-form
And the npm package can be installed like that npm i ngx-sub-form
Behind the scenes, our library uses ControlValueAccessor and that allows us to use it on template forms AND reactive forms (you'll get the best out of it by using reactive forms though).
So what is it all about?
Before I start explaining, if you prefer to follow along with a proper editor I've made a Stackblitz example: https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling
Well an example is worth a 1000 words I guess so let's redo one part of your form (the hardest one with nested data): personalDetailsForm$
First thing to do is make sure everything is going to be type safe. Let's create the interfaces for that:
export enum Gender {
MALE = 'Male',
FEMALE = 'Female',
Other = 'Other',
}
export interface Name {
firstname: string;
lastname: string;
}
export interface Address {
streetaddress: string;
city: string;
state: string;
zip: string;
country: string;
}
export interface Phone {
phone: string;
countrycode: string;
}
export interface PersonalDetails {
name: Name;
gender: Gender;
address: Address;
phone: Phone;
}
export interface MainForm {
// this is one example out of what you posted
personalDetails: PersonalDetails;
// you'll probably want to add `parent` and `responsibilities` here too
// which I'm not going to do because `personalDetails` covers it all :)
}
Then, we can create a component that extends NgxSubFormComponent.
Let's call it personal-details-form.component.
#Component({
selector: 'app-personal-details-form',
templateUrl: './personal-details-form.component.html',
styleUrls: ['./personal-details-form.component.css'],
providers: subformComponentProviders(PersonalDetailsFormComponent)
})
export class PersonalDetailsFormComponent extends NgxSubFormComponent<PersonalDetails> {
protected getFormControls(): Controls<PersonalDetails> {
return {
name: new FormControl(null, { validators: [Validators.required] }),
gender: new FormControl(null, { validators: [Validators.required] }),
address: new FormControl(null, { validators: [Validators.required] }),
phone: new FormControl(null, { validators: [Validators.required] }),
};
}
}
Few things to notice here:
NgxSubFormComponent<PersonalDetails> is going to give us type safety
We have to implements the getFormControls methods which expects a dictionary of the top level keys matching an abstract control (here name, gender, address, phone)
We keep full control over the options to create the formControl (validators, async validators etc)
providers: subformComponentProviders(PersonalDetailsFormComponent) is a small utility function to create the providers necessary to use a ControlValueAccessor (cf Angular doc), you just need to pass as argument the current component
Now, for every entry of name, gender, address, phone that is an object, we create a sub form for it (so in this case everything but gender).
Here's an example with phone:
#Component({
selector: 'app-phone-form',
templateUrl: './phone-form.component.html',
styleUrls: ['./phone-form.component.css'],
providers: subformComponentProviders(PhoneFormComponent)
})
export class PhoneFormComponent extends NgxSubFormComponent<Phone> {
protected getFormControls(): Controls<Phone> {
return {
phone: new FormControl(null, { validators: [Validators.required] }),
countrycode: new FormControl(null, { validators: [Validators.required] }),
};
}
}
Now, let's write the template for it:
<div [formGroup]="formGroup">
<input type="text" placeholder="Phone" [formControlName]="formControlNames.phone">
<input type="text" placeholder="Country code" [formControlName]="formControlNames.countrycode">
</div>
Notice that:
We define <div [formGroup]="formGroup">, the formGroup here is provided by NgxSubFormComponent you don't have to create it yourself
[formControlName]="formControlNames.phone" we use property binding to have a dynamic formControlName and then use formControlNames. This type safety mechanism is offered by NgxSubFormComponent too and if your interface changes at some point (we all know about refactors...), not only your TS will error for missing properties in the form but also the HTML (when you compile with AOT)!
Next step: Let's build the PersonalDetailsFormComponent template but first just add that line into the TS: public Gender: typeof Gender = Gender; so we can safely access the enum from the view
<div [formGroup]="formGroup">
<app-name-form [formControlName]="formControlNames.name"></app-name-form>
<select [formControlName]="formControlNames.gender">
<option *ngFor="let gender of Gender | keyvalue" [value]="gender.value">{{ gender.value }}</option>
</select>
<app-address-form [formControlName]="formControlNames.address"></app-address-form>
<app-phone-form [formControlName]="formControlNames.phone"></app-phone-form>
</div>
Notice how we delegate the responsibility to a sub component? <app-name-form [formControlName]="formControlNames.name"></app-name-form> that's the key point here!
Final step: built the top form component
Good news, we can also use NgxSubFormComponent to enjoy type safety!
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent extends NgxSubFormComponent<MainForm> {
protected getFormControls(): Controls<MainForm> {
return {
personalDetails: new FormControl(null, { validators: [Validators.required] }),
};
}
}
And the template:
<form [formGroup]="formGroup">
<app-personal-details-form [formControlName]="formControlNames.personalDetails"></app-personal-details-form>
</form>
<!-- let see how the form values looks like! -->
<h1>Values:</h1>
<pre>{{ formGroupValues | json }}</pre>
<!-- let see if there's any error (works with nested ones!) -->
<h1>Errors:</h1>
<pre>{{ formGroupErrors | json }}</pre>
Takeaway from all of that:
- Type safe forms
- Reusable! Needs to reuse the address one for the parents? Sure, no worries
- Nice utilities to build nested forms, access form control names, form values, form errors (+nested!)
- Have you noticed any complex logic at all? No observables, no service to inject... Just defining interfaces, extending a class, pass an object with the form controls and create the view. That's it
By the way, here's a live demo of everything I've been talking about:
https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling
Also, it was not necessary in that case but for forms a little bit more complex, for example when you need to handle a polymorphic object like type Animal = Cat | Dog we've got another class for that which is NgxSubFormRemapComponent but you can read the README if you need more info.
Hope it helps you scale your forms!
Edit:
If you want to go further, I've just published a blog post to explain a lot of things about forms and ngx-sub-form here https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9
I did a similar application. The problem is that you are creating all your inputs at the same time, which is not likely scalable.
In my case, I did a FormManagerService who manages an array of FormGroup. Each step has a FormGroup that is initialized once in the execution on the ngOnInit of the step component by sending his FormGroup config to the FormManagerService. Something like that:
stepsForm: Array<FormGroup> = [];
getFormGroup(id:number, config: Object): FormGroup {
let formGroup: FormGroup;
if(this.stepsForm[id]){
formGroup = this.stepsForm[id];
} else {
formGroup = this.createForm(config); // call function to create FormGroup
this.stepsForm[id] = formGroup;
}
return formGroup;
}
You'll need an id to know which FormGroup corresponds to the step. But after that, you'll be able to split your Forms config in each step (so small config files that are easier for maintenance than a huge file). It will minimize the initial load time since the FormGroups are only create when needed.
Finally before submitting, you just need to map your FormGroup array and validate if they're all valid. Just make sure all the steps has been visited (otherwise some FormGroup won't be created).
This may not be the best solution but it was a good fit in my project since I'm forcing the user to follow my steps.
Give me your feedback. :)
Is it really necessary to keep the form controls in the service? Why not just leave the service as the keeper of data, and have the form controls in the components? You could use the CanDeactivate guard to prevent the user from navigating away from a component with invalid data.
https://angular.io/docs/ts/latest/api/router/index/CanDeactivate-interface.html
I am using angularstrap typeahead directive. Its working fine with single object json values but its not working when replacing the json with my json object array.
Demo Json:
typeahead= ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"];
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead">
The above code is working fine.
My JSON object array:
typeahead = [
{id: 1, name: 'name1', email: 'email1#domain.com'},
{id: 2, name: 'name2', email: 'email2#domain.com'},
{id: 3, name: 'name3', email: 'email3#domain.com'}
];
$scope.typeaheadFn = function(query) {
return $.map($scope.typeahead, function(contacts) {
return contacts;
});
}
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn">
Please give me some solution for this.
You want to map your items to a list of strings, I believe.
Try:
$scope.typeaheadFn = function(query) {
return $.map($scope.typeahead, function(contact) {
return contact.name;
});
}
(I should add that I am currently stumped by something similar)
If you have, for example:
items = [
{id: 1, name: 'name1', email: 'email1#domain.com'},
{id: 2, name: 'name2', email: 'email2#domain.com'},
{id: 3, name: 'name3', email: 'email3#domain.com'}
];
You will need:
<input type="text" bs-typeahead ng-model="selectedItem" ng-options="item.name for item in items|orederBy:'name'|filter:{name:$viewValue}:optionalCompareFn"></input>
If you exclude filter from ng-options matching will be done on every property of item object, so if you want it to be done on one property add filter:{propName:$viewValue}. Also, if you exclude optionalCompareFn, default comparison from angular will be applied, but you can add your custom one (on your $scope), with signature (actual is property value of the item, stated in filter, not the whole object).
optionalCompareFn(expected,actual){ return /compare and return true or false/}
Attempt 1
I finally got this semi-working after a huge amount of frustration.
An easy way to get your desired text appearing is for each item to have a toString method.
You might have something like
typeaheadData = [
{id: 1, text: "abc", toString: function() { return "abc"; }},
{id: 2, text: "def", toString: function() { return "def"; }}
]
Then you will see the correct text in the options that popup, but the matching won't yet work properly (the items shown by the widget won't match the text the user enters in the box).
To get this working I used the new filter option that's been added in the current git version of angular-strap. Note that it's not even in the pre-built dist/angular-strap.js file in the repository, you will need to rebuild this file yourself to get the new feature. (As of commit ce4bb9de6e53cda77529bec24b76441aeaebcae6).
If your bs-typeahead widget looks like this:
<input bs-typeahead ng-options="item for item in items" filter="myFilter" ng-model="myModel" />
Then the filter myFilter is called whenever the user enters a key. It's called with two arguments, the first being the entire list you passed to the typeahead, and the second being the text entered. You can then loop over the list and return the items you want, probably by checking whether the text matches one or more of the properties of an item. So you might define the filter like this:
var myApp = angular.module('myApp', ['mgcrea.ngStrap'])
.filter('myFilter', function() {
return function(items, text) {
var a = [];
angular.forEach(items, function(item) {
// Match an item if the entered text matches its `text` property.
if (item.label.indexOf(text) >= 0) {
a.push(item);
}
});
return a;
};
});
Unfortunately this still isn't quite right; if you select an item by clicking on it, then the text parameter will be the actual object from the items list, not the text.
Attempt 2
I still found this too annoying so I made a fork of angular-strap (https://github.com/amagee/angular-strap) which lets you do this:
typeaheadData = [
{id: 1, text: "abc"},
{id: 2, text: "def"}
]
//...
$scope.myFormatter = function(id) {
if (id == null) { return; }
typeaheadData.forEach(function(d) {
if (d.id === id) {
return d.text;
}
});
};
<input bs-typeahead ng-options="item for item in items" ng-model="myModel"
key-field="id" text-field="text" formatter="myFormatter" />
With no need to fuss around with toString methods or filters. The text-field is what the user sees, and the key-field is what is written to the model.
(Nope! Still doesn't work if you update the model without going through the view).
The formatter option is needed so when you set the model value to just the key field, the widget can figure out the right text to display.
I've started experimenting with Backbone.js, and was struck by the documentation for the documentation for the url property on Backbone.Model.
In particular, I'm building out a REST API that uses HATEOAS/hypermedia to drive the client(s).
I can see the usefulness of Backbone's default behaviour of building up URLs itself for items in a collection, but for my case, would prefer to have the model URLs built out of the data that is parsed.
Has anyone extended/built on Backbone to make it do this? Maybe building upon a "standard" like HAL?
EDIT:
For clarification, let's say I have the following:
GET /orders >>
[
{
"_links": {
"self": "/orders/123"
}
"name": "Order #123",
"date": "2012/02/23"
},
{
"_links": {
"self": "/orders/6666"
}
"name": "Order #666",
"date": "2012/03/01"
},
]
and I have an Order model like:
var Order = Backbone.Model.extend({
});
I would like the url property to be automatically pulled out of the "self" reference in the HAL. I think creating a new base model something like (not tested):
var HalModel = Backbone.Model.extend({
url: function() {
return get("_links").self;
},
});
Thoughts?
I've extended backbone to do exactly this, the library is available here:
https://github.com/mikekelly/backbone.hal
Thanks for the clarification #Pete.
I think I see what your proposing and I suppose it could work. However, in your example, you first had to know the /Orders url before you were able to get the orders. And if you reworked your json to have an id property, you'd be pretty close to the default implementation of backbone.
Now if you just want to use a generic model or base model (e.g. HALModel) and just bootstrap it with data, your approach could be useful and definitely could work. However, I would look at overriding parse to pull the url out and set it on the model:
parse: function(response) {
this.url = response._links.self;
delete response._links;
return response;
}
I complement here the response of Simon to explain how to easily do it using gomoob/backbone.hateoas.
// Instanciation of an Hal.Model object is done the same way as you're
// used to with a standard Backbone model
var user = new Hal.Model({
firstName: "John",
lastName: "Doe",
_links: {
avatar: {
href: "http://localhost/api/users/1/avatar.png"
},
self: {
href: "http://localhost/api/users/1"
}
},
_embedded: {
address: {
"city" : "Paris",
"country" : "France",
"street" : "142 Rue de Rivoli",
"zip" : "75001",
"_links" : {
"self" : {
"href" : "http://localhost/api/addresses/1"
}
}
}
}
});
// Now we you can easily get links, those lines are equivalent
var link1 = user.getLink('avatar');
var link2 = user.getLinks().get('avatar');
// So getting self link is simple too
var self = user.getLink('self');
// All the Hal.Link objects returned by backbone.hateoas are in fact
// standard Backbone models so its standard Backbone
link1.get('href');
link1.getHref();
// You can do more with shortcut methods if your HAL links
// have more properties
link1.get('deprecation');
link1.getDeprecation();
link1.get('name');
link1.getName();
link1.get('hreflang');
link1.getHreflang();
link1.get('profile');
link1.getProfile();
link1.get('title');
link1.getTitle();
link1.get('type');
link1.getType();
linke1.get('templated');
link1.isTemplated();
// You can also manipulate embedded resources if you need
user.getEmbedded('address').get('city');
user.getEmbedded('address').getLink('self');
...
Finally we provide an Hal.Model.url() implementation which is more powerful than standard Backbone url() and which is very useful if you use HAL.
// By default url() returns the href of the self link if this self
// link is present
user.url();
// If the self link is not defined then url() has the same behavior
// as standard Backbone url() method
// My user is link to a user collection having a URL equal to
// 'http://localhost/user1'
user.url(); // http://localhost/users/1
// My user is not link to a user collection in this case the URL is
// generate using the model urlRoot property by default
user.urlRoot = 'http://myserver/users';
user.url(); // http://localhost/users/1
// backbone.hateoas also allows you to define an application wide root
// URL which prevent to use absolute URLs everywhere in your code
Hal.urlRoot = 'http://localhost/api'; // HAL root API URL
var user = new Hal.Model({ id : 1});
user.urlMiddle = 'users';
user.url(); // http://localhost/api/users/1
Hope this helps, don't hesitate to post issues on our github if you need help on this.
You can override the url function on the model to calculate the URL however you want; it's completely extensible.