sondmk header
ANGULAR JS
Controllers : การวนรอบ Objects ด้วย ng-repeat

Post by Goborijung at 2020-04-06 10:38:54 | ID: 471

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names" >
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object
Controllers : ตัวอย่าง AngularJS Applications

Post by Goborijung at 2020-04-06 10:02:15 | ID: 462

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName" ><br>
Last Name: <input type="text" ng-model="lastName" ><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller
Controllers : ตัวอย่างการควบคุม Controller

Post by Goborijung at 2020-04-06 11:05:36 | ID: 475

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName" ><br>
Last Name: <input type="text" ng-model="lastName" ><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
</script>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property
Data Binding : การควบคุม Controller ด้วย ng-click

Post by Goborijung at 2020-04-06 11:02:23 | ID: 474

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_controller
Directives : การผูก Data แบบ 2 ทาง

Post by Goborijung at 2020-04-06 10:33:05 | ID: 469

> ตัวอย่าง String
<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName" ></p>
<p>You wrote: {{ firstName }}</p>

</div>



> ตัวอย่าง Number
<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity" >
Costs:    <input type="number" ng-model="price" >

Total in dollar: {{ quantity * price }}

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_binding



> ตัวอย่าง Controller
<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name" >
{{ name }}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model
Directives : การวนรอบข้อมูลด้วย ng-repeat

Post by Goborijung at 2020-04-06 10:36:45 | ID: 470

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names" >
      {{ x }}
    </li>
  </ul>
</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
Expressions : การแสดงผลข้อมูลใน AngularJS

Post by Goborijung at 2020-04-06 09:56:41 | ID: 461

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_expression
Expressions : การสร้างตัวแปรชนิด Array

Post by Goborijung at 2020-04-06 10:23:30 | ID: 467

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_arrays
Expressions : การสร้างตัวแปรชนิด Object

Post by Goborijung at 2020-04-06 10:21:40 | ID: 466

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_objects
Expressions : การสร้างตัวแปรชนิด String และ การต่อ String

Post by Goborijung at 2020-04-06 10:19:25 | ID: 465

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

หรือ

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName" ></span></p>

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_strings
123>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com