Develop Reference

angular onclick events on plain text html elements

New to angular, I have array of responses with below structure
{
type:typeid,
title:"99695 procedure id",
description :"procedure 99265 related to repair of system 56 with combination of 98745 procedure"
}
I need to identify numbers with specific pattern and make them clickable elements[not hyperlinks, better understanding purpose I made hyperlinks here], description field from API response should be formatted like below.
procedure 99265 related to repair of system 56 with combination of 98745 procedure
Using regex I had replaced matching patterns in text with <span style='cursor:pointer'><a>matchednumber</a></span> so subsequently when angular component rendering 'description' field all numbers are getting highlighted as clickable elements.
Problem
I need to register/trigger events like mouse over or click events. How can I bind events on above elements. I tried life cycle methods
ngAfterViewInit on component, ngAfterContentInit on directive
but they need some 'template' to be defined first to get element reference to bind events(correct me if I'm wrong here)
Going through lot of articles/examples but not able to get solve. Can you please suggest how can dynamically register events on 'plan html' content rendering from angular component.

How to use Django-ratings with bootstrap-rating-input

Here goes another star rating question. I want to use bootstrap-rating-input to input rating value (1 to 5) and have django-ratings save the rating to the database. Although I'm a little green with javascript, I really want users to be able to vote using star rating instead of a number input form. Could you show me how to hook up these two apps to make them play nice with each other?
What does the view and templates look like?
And how do I configure the javascript to make the whole thing work?
Thanks!

OK, boostrap-rating-input is not specifically for django, meaning you will have to do some work to get it going.
I suggest you create a widget for it based on the django-bootstrap-datetime-picker which has implemented a similar bootstrap input field to work nicely with django.
Once that is done, you will be able to add a ratinginput widget to your form which will automatically return a number when the form is submitted, as for django ratings, as long as you have a rating = RatingField(range=5) field in your models you can override it with a rating = ratingWidget() and everything else should take care of itself.
I might try implement the widget later today.

Add this in your head part for test:
<script src="https://raw.githubusercontent.com/javiertoledo/bootstrap-rating-input/master/src/bootstrap-rating-input.js"></script>
now add this code where you want to give a rating
<input class="my_class rating" data-clearable=""
data-max="5" data-min="1" id="some_id"
name="your_awesome_parameter" value=""
type="number"
onchange="console.log($('input.my_class').rating().val())"/>
and simply you get the no. of rating in console now make a ajax call and add it to your DB .
Note: In case when you try static ratings for user view use code like that
max.times do |i|
%i{class: "glyphicon glyphicon-star#{'-empty' if i>val}"}
remember download bootstrap-rating-input.js file after success

KendoUI Switch control with AngularJS

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.

I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333

The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.

Javascript form filter based on json or XML to make option boxes

I am trying to think up a filter method based on AJAX, XML or Json. I would like to hear from anyone who has either made such a filter or have any tips.
The data could be:
<wine table>
<wine>
<color>red</color>
<origin>California</origin>
<produced>2005</produced>
<grape>Pinot Noir</grape>
</wine>
<wine>
<color>white</color>
<origin>France</origin>
<produced>2008</produced>
<grape>Chardonnay</grape>
</wine>
</wine table>
Must be able to:
Create form fields to select subgroups
When user selects first selection, all the subgroups must alter to correct data below. (filter the option boxes to match resulting filter data)
If user start the selected on form field ie 3 (grapes), the previous option boxes must alter to correct filter data.
Does anyone know of any script or tutorial or anything that can help me?

You might want to look at ExtJS examples.
With ExtJS it's quite easy. Schematically:
You define a Wine model with fields color, origin and so on.
Define a proxy for the model (a list URLs for create/read/update/destroy) with a reader and writer of the JSON or XML type.
Create a view with a form component.
Create a datagrid view to
browse wines and load them into the form
(as simple as form.loadRecord(wineModelRecord)). See this example.
In controller you subscribe to the submit event of the form to
create/update Wine model records.
Actually, I believe the same can be done easily with any other MVC framework, like Backbone.js or Angular.js.

JSF custom component losing input focus on ajax update

I'm writing an autocomplete custom component as a learning exercise with JSF
2.1.3. The idea (which is probably pretty familiar) is to enter some text into
and input component and present a list box with matching values. The idea is
to have a keyup javascript event on the input which calls jsf.ajax.request()
to update the component. So far I've got a component which I can include like
this:
<mycc:autocomplete id="myauto" searchMethod="#{bean.doSearch}"/>
This renders html like this:
<span id="myauto">
<input type="text" id="myauto_input" name="myauto_input"
onkeyup="com.myco.ajaxRequest(this, event)"/>
<select id="myauto_listbox" name="myauto_listbox">
<option value="1st">First</option>
<option value="2nd">Second</option>
</select>
</span>
The com.myco.ajaxRequest() javascript function (keyup) does this:
jsf.ajax.request(comp, null, {
execute: 'myauto',
render: 'myauto'
});
So because I want to rebuild and rerender the listbox with the suggestions
list, I'm re-rendering the custom component 'myauto'. By specifying execute:
'myauto' the decode() method executes and I can get the input value. By
specifying render: 'myauto' the encode...() methods execute to regenerate
the html.
This is all fine but because I'm rendering the parent of the myauto_input
component I lose input focus every time the keyup event fires.
If I specify something like render: 'myauto_listbox' (I only really want to
rerender the listbox after all) the problem is that the encode...() methods
don't execute, because they're for the custom component as a whole, not just
the listbox. And it would be in one of the encode...() methods that I rebuild
the listbox containing the suggestions.
The component extends UIInput and I generate markup in a separate renderer
(componentFamily = "javax.faces.Input") in the encodeEnd() method (so this
always runs after any supplied converter - not yet implemented). I suppose
that forcing focus from javascript is a horrible hack and to be avoided.
I'm a bit unsure where to go with this, but I suspect that what I'm seeing
indicates that I'm approaching this in the wrong way somehow. If anyone
would be good enough to point me in the right direction I'd greatly appreciate
it.

I've spent some time looking into this and the general issue of losing focus after
an ajax update is fairly common and is described in Jim Driscoll's blog (see
'Keeping Focus').
In the case of my custom component I (think I...) have to update the custom component
itself which is the parent of the input, so I'm going to lose focus as a result of the
ajax update, and that's just the way it is. As such I've looked at what needs to be
done to restore focus, and it seems that in my renderer encode I simply have to
forcibly restore focus to the input, but only when responding to the POST sent from the onkeyup event by jsf.ajax.request. I use jQuery and just calling .focus() isn't
enough because you also have to get the cursor position to the end of any existing
input. This code below seems to work ok:
<script>
jQuery(function($){var cid='#myauto_input';$(cid).focus().focus().click();$(cid).val($(cid).val());});
</script>
(note: .focus().focus().click() required for IE8, just .focus() works on chrome...)
So it looks like the horrible hack has saved the day. I did wonder if there would be
any difference if I used the jQuery ajax routines rather than the jsf ajax library but
I don't suppose it would make any difference.