AngularJS Processing data tables

Use np-repeat Instructions

<table>
...
<!-- Use here ng-repeat Instructions to duplicate data to generate tables -->
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
...
</table>

Data objects

  $scope.student = {
firstName: "Terry",
lastName: "Lee",
fees:500,
subjects:[
{name:' Fundamentals of programming language ',marks:90},
{name:'C Language ',marks:85},
{name:'HTML/CSS',marks:61},
{name:'Java',marks:85},
{name:'NodeJS',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};

AnguarJS page HTML Element control

Use  ng-disabled Instructions

   <td><input type="checkbox" ng-model="enableDisableButton"> Disable the right button </td>
<td><button ng-disabled="enableDisableButton"> Demo button </button></td>

explain :

Define a model, Here for "enableDisableButton", then model give ng-disabled Instructions , Effective .

Complete code

<div ng-app="" class="ng-scope">
<table border="0">
<tbody><tr>
<th> Control operation </th>
<th> Demo elements </th>
</tr>
<tr>
<td><input type="checkbox" ng-model="enableDisableButton" class="ng-valid ng-dirty"> Disable the right button </td>
<td><button ng-disabled="enableDisableButton"> Demo button </button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide1" class="ng-pristine ng-valid"> Show the right button </td>
<td><button ng-show="showHide1" class="ng-hide"> Demo button </button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide2" class="ng-pristine ng-valid"> Hide the right button </td>
<td><button ng-hide="showHide2" class=""> Demo button </button></td>
</tr>
<tr>
<td><p class="ng-binding"> Number of clicks : </p></td>
<td><button ng-click="clickCounter = clickCounter + 1"> Click count </button></td>
</tr>
</tbody></table>
</div>

AngularJS Form data validation for

Angular You can use the following methods to verify the form data :

$dirty - This status indicates that the data has been modified
$invalid- This status indicates that the input data is illegal
$error- This status indicates a specific validation error

<div ng-app="" ng-controller="studentController" class="ng-scope">
<form name="studentForm" class="ng-pristine ng-valid ng-valid-required">
<table>
<tbody><tr>
<td> surname :</td>
<td>
<input name="lastname" type="text" ng-model="lastName" required="" class="ng-pristine ng-valid ng-valid-required">
<span style="color:red" ng-show="studentForm.lastname.$dirty &amp;&amp; studentForm.lastname.$invalid" class="ng-hide">
<span ng-show="studentForm.lastname.$error.required" class="ng-hide"> Last name is required </span>
</span>
</td>
</tr>
<tr>
<td> name :</td>
<td>
<input name="firstname" type="text" ng-model="firstName" required="" class="ng-pristine ng-valid ng-valid-required">
<span style="color:red" ng-show="studentForm.firstname.$dirty &amp;&amp; studentForm.firstname.$invalid" class="ng-hide">
<span ng-show="studentForm.firstname.$error.required" class="ng-hide"> First name is required </span>
</span>
</td>
</tr>
<tr>
<td> mail :</td>
<td>
<input name="email" type="email" ng-model="email" length="100" required="" class="ng-pristine ng-valid-email ng-valid ng-valid-required">
<span style="color:red" ng-show="studentForm.email.$dirty &amp;&amp; studentForm.email.$invalid" class="ng-hide">
<span ng-show="studentForm.email.$error.required" class="ng-hide"> You have to fill in the email </span>
<span ng-show="studentForm.email.$error.email" class="ng-hide"> Message format error </span>
</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()"> Reset form </button>
</td>
<td>
<button ng-disabled="studentForm.firstname.$dirty &amp;&amp; studentForm.firstname.$invalid ||
studentForm.lastname.$dirty &amp;&amp; studentForm.lastname.$invalid ||
studentForm.email.$dirty &amp;&amp; studentForm.email.$invalid" ng-click="submit()"> Submit form </button>
</td>
</tr>
</tbody></table>
</form>
</div>
 function studentController($scope) { 

   // call reset Set the corresponding value of the form input box to the following default value 
$scope.reset = function(){
$scope.firstName = "terry";
$scope.lastName = "lee";
$scope.email = "terrylee@gbtags.com";
} $scope.reset();
}

( 3、 ... and )Angularjs - More articles about small examples

  1. ( Four )Angularjs - Small examples (2)

    Custom instruction writing clock Templates <!-- Template file --><html> <!-- Built in ng-app Instruction tells the compiler to start AngularJS frame --> <body ng ...

  2. ( Exercises ) Using constructor function to realize three small examples —— Don't use String() And Array() Constructors and Math object , Methods and properties that do not use built-in methods .

    1) stay String() Customize one when the constructor doesn't exist myString() Constructor functions . because String() non-existent , So you can't write constructor functions with any built-in String Methods and properties of objects . And let what you create right ...

  3. python Three small examples of the actual combat of the project

    1.   Let the user enter the radius of the circle , Tell the user the area of the circle : import math while True:     # User input     r = input(" Please enter the radius of the circle :")     ...

  4. WCF Small instances and three hosts

    WCF Small instances and three hosts I've been learning WCF Related knowledge , The following will be a simple review of the knowledge learned through a small example : This example is a simple three-tier operation database , And there are also three simple hosts ( Console host ,IIS Host and Window ...

  5. CSS Application content supplement and small examples

    One .clear Remove the floating <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. A simple Android Small examples

    original text : A simple Android Small examples One . Configuration environment 1. download intellij idea15 2. install Android SDK, adopt Android SDK Manager install or uninstall Android platform   3. install J ...

  7. angularjs directive example Detailed explanation

    As mentioned earlier angularjs Of factory,service,provider, This can be understood as php Of model, such model Is not to bring html Of , What I said today directive, It can also be interpreted as php Of mo ...

  8. [ Roof placement ] Cocos2d-x Example source code analysis II The main framework of small instances

    This article is the first small example of analysis ActionTest Source code . In fact, the structure of all instance programs is the same , Only the code in a particular method is different , The big frame is the same . That is to say, after reading this article, you can start to analyze other source code yourself . I don't say much nonsense , ...

  9. Python_ Small examples of reptiles

    Small examples of reptiles One . Problem description and analysis Q: Query a stock , The number of results on Baidu search page and the change of search results . analysis : The number of search results is shown in the figure below : Changes in search results : Through observation we can see that , The number of search results varies over a period of time ...

Random recommendation

  1. Linux Linux Program exercise 18

    subject : Write a TCP Servers and clients , be based on TCP Concurrent remote shell Requirement realization : ) For all received client messages , Execute as a command line , And return the output of the command line to the client ) Requires concurrency structure ) Implement key code ...

  2. Flex utilize titleIcon Attribute to Panel Add a ICON Icon

    Flex utilize titleIcon attribute , to Panel Add a ICON Icon . Let's take a look at Demo( You can right-click View Source Or click here to see the source code ): Here is the complete code ( Or click here to see ): ...

  3. volatile Keyword parsing ( turn )

    volatile Keyword parsing Reprint :http://www.cnblogs.com/dolphin0520/p/3920373.html volatile This keyword may have been heard by many friends , Maybe it's all used . stay J ...

  4. Expression evaluation --Java Realization

    /* The infix expression -- Convert to suffix expression -- It belongs to an application of stack * Specific ideas : *1. Scan string , When encountering operands, we don't care , Put it in a string *2. Operator priority comparison -- Defines the method * High priority in the stack : Out of the stack into the word ...

  5. Define a number , It could be positive It can also be negative var num = Math.pow(-1,parseInt(Math.random() * 2) + 1);

    // Define a random number from 0 ~ Page width var x = parseInt(Math.random() * myCanvas.width); // Define a random number Range from 0 ~ Page height var y = ...

  6. Python Basic learning Chapter 2

    One . Python How to run a program 1. Writing code in interactive mode The simplest operation Python The way to program is in Python Interactive command line input program . Of course, there are many ways to start such a command line , such as IDE, System terminals . If you have ...

  7. 【Unity】6.1 Unity Medium C# Script Basics

    classification :Unity.C#.VS2015 Date of creation :2016-04-16 One . brief introduction 1. frequently-used C# data type Here is a brief introduction Unity When developing games , Some of the most commonly used data types . (1) Basic types int.float. ...

  8. Rookie Science Java( Four )——JSP Built-in objects

    Study JavaWeb Can't leave JSP, And learning JSP I have to understand the nine common built-in objects . Let's make a brief introduction today . request Request Encapsulates the information submitted by the user , By calling Request The corresponding method can get the encapsulation ...

  9. C++ template —— Intelligent pointer ( Twelve )

    When managing dynamically allocated memory , One of the toughest problems is deciding when to free the memory , And smart pointer is a programming way to simplify memory management . Intelligent pointer generally has two ownership models: exclusive and shared .-------------------------- ...

  10. cgroup Limit memory

    cgroup There is one memory Subsystem , There are two sets of files , A group of bands memsw , The other group didn't bring . # docker ps -a # cd /sys/fs/cgroup/memory/docker/4b5619 ...