Follow Fang!: AngularJS

顯示具有 AngularJS 標籤的文章。顯示所有文章

2020/02/24

Angular.js 修改預設解析文字

原本解析文字為{{}}，跟目前專案用的框架有衝突
故改成####解析

var myApp = angular.module('fix', []);
    myApp.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('##');
        $interpolateProvider.endSymbol('##');
    });

2016/05/24

Angular.js custom filters inject $scope

要使用$scope裡面參數則可以透過filter後面加上：$scope.參數名稱即可

<!DOCTYPE html>
<html ng-app="test">
 <head>
  <title>hi</title>
  <meta charset="utf-8">
  <script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script type="text/javascript">
   var app = angular.module('test', []);
   app.controller('testController', function($scope){
    $scope.title = "是個好人";
   });

   app.filter('addTitle', function(){
    return function(name, title){
     return name + title;
    }
   });
  </script>
 </head>
 <body ng-controller="testController">
  <input type="text" ng-model="name" ng-init="name='王小明'">
  <p ng-bind="name|addTitle:title"></p>
 </body>
</html>

執行結果：

Angular.js custom filters

下方的範例只有將文字轉換成大小寫以及偶數和奇數

<!DOCTYPE html>
<html ng-app="test">
 <head>
  <title>hi</title>
  <meta charset="utf-8">
  <script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script type="text/javascript">
   var app = angular.module('test', []);
   app.controller('testController', function($scope){
    $scope.number = [1, 2, 3, 4, 5, 6, 7, 8];
   });

   app.filter('upperCase', function(){
    return function(str){
     return str.toUpperCase();
    }
   });

   app.filter('lowerCase', function(){
    return function(str){
     return str.toLowerCase();
    }
   });

   app.filter('evenNumber', function(){
    return function(number){
     var array = [];
     angular.forEach(number, function(v){
      if(v%2==0)
       array.push(v);
     })
     return array;
    }
   });

   app.filter('oldNumber', function(){
    return function(number){
     var array = [];
     angular.forEach(number, function(v){
      if(v%2!=0)
       array.push(v);
     })
     return array;
    }
   });

  </script>
 </head>
 <body ng-controller="testController">
  <p ng-bind="'hello,world' | upperCase"></p>
  <p ng-bind="'HELLO, WORLD' | lowerCase"></p>
  偶數
  <div ng-repeat="n in number | evenNumber">
   {{n}}
  </div>
  奇數
  <div ng-repeat="n in number | oldNumber">
   {{n}}
  </div>
 </body>
</html>

執行結果：

2016/05/23

Angular.js $http post/get

有需要用Angular.js做post/get的朋友可以使用$http的方法做post/get的事情
不過記得controller要加入$http參數

app.controller('fixController', function($scope, $http){
 $scope.search = function () {
  $http({
   method: 'POST',
   url: './test.php',
   data: 'one=1&two=2',
   headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
  }).success(function(res){
   console.log(res);
  }).error(function(){
   console.log('error');
  });
 };
});

2015/10/02

AngularJS ng-list

ng-list：可以將指定的文字切割成清單

<!DOCTYPE html>
<html ng-app="myApp">
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script type="text/javascript">
   var myApp = angular.module('myApp', []);
   myApp.controller('myController', function($scope){
   });
  </script>
  <meta charset="utf8"/> 
  <title>Filter</title>
 </head>
 <body ng-controller="myController">
  <textarea ng-model="list" ng-list=";" ng-trim="false"></textarea>
  <pre ng-bind="list"></pre>
  <pre>{{list}}</pre>
 </body>
</html>

執行結果：

AngularJS $location

$location是繼承於window.location

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script type="text/javascript">
      var myApp = angular.module('myApp', []);
      myApp.controller('myController', function($scope, $location){
        $scope.location = $location;
      });
    </script>
    <meta charset="utf8"/> 
    <title>Filter</title>
  </head>
  <body ng-controller="myController">
    <div>
      <p ng-bind="location.absUrl()"></p>
      <p ng-bind="location.protocol()"></p>
      <p ng-bind="location.host()"></p>
      <p ng-bind="location.port()"></p>
      <p ng-bind="location.path()"></p>
    </div>
  </body>
</html>

執行結果：

AngularJS get json

JSON可以透過$http來取得

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script type="text/javascript">
      var myApp = angular.module('myApp', []);
      myApp.controller('myController', function($scope, $http){
        $scope.array = ["車牌號碼", "起始站", "起始站:終點站"];

        $http.get('http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AP&CaseNo2=9&FileType=1&Lang=C&FolderType=O',
          {header : {'Content-Type' : 'application/json; charset=utf8'}})
        .success(function(data, status, headers, config) {
          $scope.posts = data;
        })
        .error(function(data, status, headers, config) {
        
        });
      });
    </script>
    <meta charset="utf8"/> 
    <title>Filter</title>
  </head>
  <body ng-controller="myController">
    <table>
      <tr >
        <td ng-repeat="a in array">{{a}}</td>
      </tr>
      <tr ng-repeat="p in posts">
        <td>{{p.ID}}</td>
        <td>{{p.departureZh}}</td>
        <td>{{p.ddesc}}</td>
      </tr>
    </table>
  </body>
</html>

執行結果：

2015/09/30

AngularJS ng-click

ng-click：可以給予元素有點擊的事件，以div為例

<!DOCTYPE html>
<html ng-app="myApp">
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script type="text/javascript">
   var myApp = angular.module('myApp', []);
   myApp.controller('myController', function($scope){
    $scope.divClick = function(){
     alert("點擊的是一個div");
    };
   });
  </script>
  <meta charset="utf8"/>
  <title>Filter</title>
 </head>
 <body ng-controller="myController">
  <div ng-click="divClick()">Hi</div>
 </body>
</html>

執行結果：

AngularJS ng-init

ng-init可以用於設定初始值

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script type="text/javascript">
   var myApp = angular.module('myApp', []);
   myApp.controller('myController', function($scope){
    $scope.names = ['陳', '王', '方', '林', '朱'];
    $scope.divClick = function(name, index){
     alert(name + "在陣列的位置為" + index);
    };
   });
  </script>
  <meta charset="utf8"/>
  <title>Filter</title>
 </head>
 <body ng-app="myApp">
  <div ng-controller="myController">
   <div ng-repeat="name in names" ng-init="nameIndex=names.indexOf(name)" ng-bind="name" ng-click="divClick(name, nameIndex)"></div>
  </div>
 </body>
</html>

執行結果：

2015/09/29

AngularJS ng-href

ng-href用於a元素的超連結功能

<!DOCTYPE html>
<html>
  <head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
   <script type="text/javascript">
      var myApp = angular.module('myApp', []);
      myApp.controller('myController', function($scope){
          $scope.name = "霸氣資訊";
          $scope.url = "http://box7.tw";
      });
   </script>
   <meta charset="utf8"/>
   <title>Filter</title>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <a ng-href="{{url}}"><p ng-bind="name"></p></a>
    </div>
  </body>
</html>

AngularJS ng-bind 包含文字

ng-bind是可以同時輸出文字的，必須在輸出文字用兩個「'Hi'」單引號包起來

<p ng-bind="'英文成績：' + score.En + '國文成績：' + score.Ch + '數學成績：' + score.Math"></p>

AngularJS ng-change

ng-change可以用在可改變選項的元素：Select、Input、Textarea

<!DOCTYPE html>
<html>
  <head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
   <script type="text/javascript">
      var myApp = angular.module('myApp', []);
      myApp.controller('myController', function($scope){
        $scope.students = [
          {'Name' : 'Wang', 'En' : 90, 'Ch' : 50, 'Math' : 70},
          {'Name' : 'Chen', 'En' : 30, 'Ch' : 90, 'Math' : 100},
          {'Name' : 'Fang', 'En' : 40, 'Ch' : 60, 'Math' : 10},
          {'Name' : 'Hung', 'En' : 90, 'Ch' : 90, 'Math' : 90}];
        $scope.selectIndex = 0;
        $scope.score = $scope.students[0];

        $scope.myChange = function(){
           $scope.score = $scope.students[$scope.selectIndex];
        };
      });
   </script>
   <meta charset="utf8"/>
   <title>Filter</title>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <select ng-model="selectIndex" ng-change="myChange()" ng-options="students.indexOf(student) as student['Name'] for student in students"></select>
      <p ng-bind="'英文成績：' + score.En + '國文成績：' + score.Ch + '數學成績：' + score.Math"></p>
    </div>
  </body>
</html>

執行結果：

AngularJS ng-options

ng-options可以在Select元素內新增Option元素
且ng-options必須搭配ng-model使用，否則將不會值新增至Select

<!DOCTYPE html>
<html>
  <head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
   <script type="text/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('myController', function($scope){
      $scope.students = [
      {'Name' : 'Wang', 'En' : 90, 'Ch' : 50, 'Math' : 70},
      {'Name' : 'Chen', 'En' : 30, 'Ch' : 90, 'Math' : 100},
      {'Name' : 'Fang', 'En' : 40, 'Ch' : 60, 'Math' : 10},
      {'Name' : 'Hung', 'En' : 90, 'Ch' : 90, 'Math' : 90}];

      $scope.selectIndex1 = 0;
      $scope.selectIndex2 = 0;
      $scope.selectIndex4 = 0;
    });
   </script>
   <meta charset="utf8"/>
   <title>Filter</title>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <!--沒有明確給予Value值!-->
      <select ng-model="selectIndex1" ng-options="student['Name'] for student in students"></select><br>

      <!--有明確給予Value值 且在Controller有宣告ng-model初始值!-->
      <select ng-model="selectIndex2" ng-options="students.indexOf(student) as student['Name'] for student in students"></select><br>

      <!--沒有明確給予Value值 但有預設的Option元素!-->
      <select ng-model="selectIndex3" ng-options="students.indexOf(student) as student['Name'] for student in students"><option value="">請選擇</option></select><br>

      <!--明確給予Value值 但用track沒辦法指定初始值!-->
      <select ng-model="selectIndex4" ng-options="student['Name'] for student in students track by students.indexOf(student)"></select><br>

      <!--沒有指定ng-model 不會將值新增至Select-->
      <select ng-options="student['Name'] for student in students track by students.indexOf(student)"></select>
    </div>
  </body>
</html>

AngularJS ng-hide ng-show

ng-hide可以隱藏元素
ng-show則可以顯示元素

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script type="text/javascript">
  var myApp = angular.module('myApp', []);
  myApp.controller('myController', function($scope){
    $scope.students = [
    {'Name' : 'Wang', 'En' : 90, 'Ch' : 50, 'Math' : 70},
    {'Name' : 'Chen', 'En' : 30, 'Ch' : 90, 'Math' : 100},
    {'Name' : 'Fang', 'En' : 40, 'Ch' : 60, 'Math' : 10},
    {'Name' : 'Hung', 'En' : 90, 'Ch' : 90, 'Math' : 90}];
  });
 </script>
 <meta charset="utf8"/>
 <title>Filter</title>
</head>
<body ng-app="myApp">
  <div ng-controller="myController">
  搜尋：<input ng-model="searchText" type="text">
  顯示?<input ng-model="isCheck" type="checkbox">
    <div ng-hide="!isCheck" ng-show="isCheck">
      <table>
        <tbody>
          <tr ng-repeat="s in students | filter:searchText">
            <td>
              {{s.Name}}&nbsp
              {{s.En}}&nbsp
              {{s.Ch}}&nbsp
              {{s.Math}}&nbsp
              {{(s.En + s.Ch + s.Math) / 3 | number:2}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

2015/09/22

AngularJS Image src (ng-src)

如果用AngularJS給予image元素來源則可以透過ng-src

<img ng-src="{{imagesrc}}">

2015/09/07

AngularJS ng-bind-html

ng-bind-html可以將HTML程式碼透過AngularJS來印出

<!DOCTYPE html>
<html ng-app="myApp">
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <!--必須加入這行-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>  
  <script type="text/javascript">
   var myApp = angular.module('myApp', ['ngSanitize']);
   myApp.controller('myController', function($scope){
    $scope.myHTML = '<br><b>hi<b></br>';
   });
  </script>
  <meta charset="utf8"/>
  <title>ng-bind-html</title>
 </head>
 <body>
  <div ng-controller="myController">
   <p ng-bind-html="myHTML"></p>
  </div>
 </body>
</html>

AngularJS ng-bind

今天在幫朋友修改網頁時使用Angular，剛好看到 ng-bind這功能
平常都是用{{}}來印出值

<td>
      {{s.Name}}&nbsp
      {{s.En}}&nbsp
      {{s.Ch}}&nbsp
      {{s.Math}}&nbsp
      {{(s.En + s.Ch + s.Math) / 3 | number:2}}
     </td>

而改用ng-bind則必須搭配一個HTML標籤來做使用

<td>
 <span ng-bind="s.Name"></span>
 <span ng-bind="s.En"></span>
 <span ng-bind="s.Ch"></span>
 <span ng-bind="s.Math"></span>
 <span ng-bind="(s.En + s.Ch + s.Math) / 3 | number:2"></span>
</td>

使用ng-bind好處則是必須指派一個HTML來做bind動作
相對的能避免使用看到沒有編譯過的原始碼

參考資料：
http://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips.aspx

2015/08/12

AngularJS Filter

程式碼：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script type="text/javascript">
  var myApp = angular.module('myApp', []);
  myApp.controller('myController', function($scope){
    $scope.students = [
    {'Name' : 'Wang', 'En' : 90, 'Ch' : 50, 'Math' : 70},
    {'Name' : 'Chen', 'En' : 30, 'Ch' : 90, 'Math' : 100},
    {'Name' : 'Fang', 'En' : 40, 'Ch' : 60, 'Math' : 10},
    {'Name' : 'Hung', 'En' : 90, 'Ch' : 90, 'Math' : 90}];
  });
 </script>
 <meta charset="utf8"/>
 <title>Filter</title>
</head>
<body>
 <div ng-controller="myController">
  搜尋：<input ng-model="searchText" type="text"><br><br>
  <table>
   <tbody>
    <tr ng-repeat="s in students | filter:searchText">
     <td>
      {{s.Name}}&nbsp
      {{s.En}}&nbsp
      {{s.Ch}}&nbsp
      {{s.Math}}&nbsp
      {{(s.En + s.Ch + s.Math) / 3 | number:2}}
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>

執行結果：

2015/08/11

AngularJS Templates

程式碼：

<!DOCTYPE html>
<html ng-app="appName">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script type="text/javascript">
 var module = angular.module('appName', []);
 module.controller('myController',  function($scope){
  $scope.webs = [
   {'name' : 'Google', 'url' : 'http://www.google.com.tw'},
   {'name' : 'Yahoo', 'url' : 'http://www.yahoo.com.tw'},
   {'name' : 'Ruten', 'url' : 'http://www.ruten.com.tw'}
  ];

  $scope.name = "C.Y. Fang";
  $scope.web = "http://cyfangnotepad.blogspot.tw/";
  $scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 });
 </script>
 <meta charset="utf8"/>
 <title>Test</title>
</head>
<body>
 <div ng-controller="myController">
  <div ng-repeat="web in webs">
   <a href={{web.url}}><span>{{web.name}}</span></a><p>
  </div>
  <span>
   <h1><a href={{web}}>{{name}}</a></h1>
  </span>
  <div ng-repeat="number in numbers">
   {{ number * 10}}<p>
  </div>
 </div>
</body>
</html>

執行結果：

訂閱：文章 (Atom)