The types of angularjs input directive (part 1)

Friday, February 12th, 2016 (0 Comment)

There are many types of angularjs input directive as checkbox, textbox, select, date, datetime, datetime local, radio, textarea… Today we will learn about the angularjs input textbox and checkbox input. Default if the input does not use the “type” attribute, it is input textbox.

The Directives are often used in conjunction with input:

  • ngModel: return String, declare key save to $scope and will be linked to the corresponding expressions ({{expression}}).
  • name: return String, name of input.
  • required: return String. Setup error when the user does not input.
  • ngRequired: return Boolean. Set attributes required if the value passed is true.
  • ngMinlength: return Number. Set the minimum length of the entered value.
  • ngMaxlength: return Number. Set the maximum length of the entered value.
  • ngPattern: return String. Expression matches the entered value.
  • ngChange: return String. Call to function when the event passed to change.
  • ngTrim: return Boolean. If set to true, when retrieving data it will be trim space at the start and end.

1. What is textbox input (default is angularjs input)

HTML textbox is used to retrieve information when users type in text mode. In AngularJs input textbox is the same function, the purpose is to get information of the user.

To declare a textbox input that I will use the attribute type = “text” or undeclared type attribute.

Example 1: we will create a simple register page.

Demo

  • Line 26: using directive template that you defined (password-match).
  • Line 27: show text when input repassword not equal with password.
  • Line 31 – 36: show text when input email invalid.
  • Line 38: show text when submit successful.
  • Line 47 – 66: defined directive passwordMatch

2. What is angularjs input checkbox?

Checkbox used to retrieve the user’s information in the form multiselect, meaning users can select one or more checkboxes. In the AngularJs checkbox is the same function, the goal is also to get information of the user only.

To declare a checkbox input that I will use the attribute type = “checkbox”. Generally when we set the value for the checkbox, we use attribute value=”value”. But there are other ways in AngularJS, you need to read the details below.

The Directives are often used in conjunction with checkbox input:

  • ngModel: return String. Linked to $scope.
  • name: return String. Name of checkbox.
  • ngTrueValue: return expression. Expression is set when checked.
  • ngFalseValue: return expression. Expression is set when unchecked.
  • ngChange: return String. The function will be called until the input checked or canceled checked.

Example 2: Create two checkbox and set the first checkbox is checked then display text is ‘YES’, and if not checked is ‘NO’, similar for the second checkbox.

Demo

  • Line 13 and 14: remember set text values: YES and NO in single quotes (‘YES’ and ‘NO’)

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *