Expressions : การสร้างตัวแปรชนิด ตัวเลข และ การคำนวณ

Post by Goborijung at 2020-04-06 10:12:26 | ID: 464

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

หรือ

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

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

Expressions : ตัวอย่างให้ AngularJS เปลี่ยนค่าของคุณสมบัติ css

Post by Goborijung at 2020-04-06 10:10:09 | ID: 463

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>

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

Filter : ตัวกรองสกุลเงิน

Post by Goborijung at 2020-04-07 13:12:52 | ID: 482

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

<h1>Price: {{ price | currency }}</h1>

</div>

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

Filter : การ Order By Field จาก ng-repeat

Post by Goborijung at 2020-04-07 12:59:01 | ID: 481

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

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

</div>

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

Filter : การกรองข้อมูลตาม Input ของผู้ใช้

Post by Goborijung at 2020-04-07 13:19:24 | ID: 484

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter : test">
 {{ x }}
  </li>
</ul>

</div>

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

Filter : การเพิ่มตัวกรกองแบบกำหนดเอง

Post by Goborijung at 2020-04-07 13:27:44 | ID: 486

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  };
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

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

Filter : การเพิ่มตัวกรอง และส่งคืนชื่อที่มีตัวอักษร i

Post by Goborijung at 2020-04-07 13:15:58 | ID: 483

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

<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>

</div>

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

Filter : การเรียงลำดับหัวตารางด้วย ng-click

Post by Goborijung at 2020-04-07 13:24:43 | ID: 485

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

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

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

Filter : ตัวอย่างการเพิ่ม Filter

Post by Goborijung at 2020-04-07 12:51:52 | ID: 480

> แปลงเป็นตัวพิมพ์ใหญ่
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

หรือ 
> แปลงเป็นตัวพิมพ์เล็ก
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

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

Intro : ตัวอย่าง AngularJS

Post by Goborijung at 2020-04-06 09:45:20 | ID: 458

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

<div ng-app="" >
  <p>Name : <input type="text" ng-model="name" ></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

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