Pages

Wednesday, 30 July 2014

Creating a Star Control as element Tag or Attribute in HTML using Angular Js

In this article we are going to see how to create a Star Rating control in the HTML as Element or as Attribute using the Angular js. To do this we are going to take create the Directive in Angular js, First Let we see what kind of element or Attribute we are going to create and what kind of output it will give ?Below Code Snippet is we trying to do

Output:

From the Code we can render a Star Control, using the some of the properties it will have some behavior change.custom-rating is the act as element or attribute for render a star control, it have few optionsreadonly: set true for this attribute if you want the star control as readonlymax: set the number of star you want to renderstar-size : size of the star controlrating-value : specify the rating value of a controlon event is there to trigger for the change in the star value when user clicked, then use the on-rating-changed with a function passing parameter in the name of rating , which consists the value, now you can trigger the value to the server.Now we start to build the directive.Add the following jquery in the HTML.

<scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>

<scripttype="text/javascript"src="js/angular.min.js"></script>

Then start writing coding in Angular.Create a Module and controllerFirst step is create a module in separate js file and include in the HTML.

So now when include the custom js in the Html, we can able to render the Star control .Now when ever user change the value in one star it affects others because of binding, at the same time we are trigger the changes to the server.From this article you can learn how to render a star control tag in Html using Angular Js.