Unable to use another directive by assigning array of objects

[pushpendragzb]

Hi,

I want to use typeahead in this. everything is ok but when i assign the options it throws error:

Error: Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object]] starting at [Object]]

The directive link is : http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/

Thanks, Pushpendra

[danhunsaker]

I'm not exactly sure how you'd use that particular typeahead directive with dynForms in the first place, as it creates its own input field, among other things. I'd have to actually see the parts of your code where you (1) use the <dynamic-form> directive, and (2) define the dynForms JSON template. From there I might be able to figure out what's causing problems.

[pushpendragzb]

Thats ok. I will send a plunkr. By the time can u please suggest me an autocomplete/typeahed that takes array of objects like [{"id":1,"name":"first"}] and returning id =1 on selection.

Thanks, Pushpendra

[pushpendragzb]

Please find this plunkr. Get typeahed in this: http://plnkr.co/edit/pRgyDuif7anK5CMbhGc4?p=preview

Thanks, Pushpendra

[danhunsaker]

OK, the specific error you reported is because you're assigning an object to the value of an attribute, which requires that it be cast to a string. JavaScript, by default, doesn't JSON-encode objects when converting them to strings, so you have to do that manually (you can use angular.toJson(object) for this). Better yet, use the name of a scope variable instead - your Plunkr already includes a $scope.items, so you can just use that.

Second, try to avoid making changes to dynamic-forms.js - making changes there just makes it harder for me to provide support, because I have no idea what your changes are doing. At first, I didn't even see that they had been made in the first place.

For your typeahead directive, you'll want to place that in a separate script file. Start it with angular.module('your-custom-module-name', []), then you can paste any directives right below it. Alternately, I recommend AngularUI Bootstrap - it supports a lot of commonly-used controls, including a typeahead, and it's very well maintained.

For the typeahead field type, you don't need to add anything to the code at all. Instead, use a type that isn't on the list of supported types (typeahead should still work, here, though I tend to use span since that's what will be created), and specify the attributes you need (including one called typeahead) in the other keys of the object. So something like:

{
    "type": "span",
    "typeahead": "typeahead", //  Or any other non-empty value, really
    "items": "items", //  Points to $scope.items in your app
    "prompt": "Start typing a name",
    "title": "name",
    "subtitle": "id",
    "model": "jk12",
    "value1": "jk"
}

There are a number of reasons I haven't added all kinds of advanced field types to this module, and most of them come back to user choice - instead of selecting a typeahead implementation that half of my potential users won't like, I instead provide mechanisms like the one described above for them to choose and use their own. At some point soon, I hope to refactor this module to support addon modules that extend the supported fields list. At that point, it will be easy to add a typeahead field type that creates a DOM element compatible with whichever directive you prefer to use, simply by creating an addon module to provide it, as one example. I also intend to provide at least one such module to support the various controls provided by AngularUI Bootstrap, so they will become easily accessible with minimal "hacks".

But until then, the recommended approach is the one I gave here. I unfortunately don't have the time to provide useful support otherwise.