Ti-Tiâu

發表文章

目前顯示的是 8月, 2014的文章

AngularJS (14) <form required> 欄位是否為空

作者： Tshuà Bûn-lī (蔡文莉) - 8月 25, 2014

本篇程式碼請看( Plunkr ) 名字不可為空地址不可以為空作法首先，幫你的表格取名 <body ng-app="app1"> <form name="myform">  </form> </body> 先加入一組<input>、以及警告訊息。首先，<input>必須有name和required這兩個屬性： name: 建立欄位和警告訊息的對應關係。 required: AngularJS 提供的檢查子，對應的驗證變數是 $error.required。 <input name="aa" ng-model="myform.username" required/> 接著，當myform的aa欄位為空字串時，我們希望出現它的警告訊息。所以我們利用required，當欄位為空 →→ required = true →→ 顯示對應的警告訊息。 <span ng-show="myform.aa.$error.required">名字不可為空</span> 剛剛為什麼要取名？因為要保證這行警告訊息只會取決於myform.aa是否是空欄位。另外一組就是如法炮製啦！只是將<input>取名為bb。 <input name="bb" ng-model="myform.address" required/> <span ng-show="myform.bb.$error.required">地址不可以為空</span>

閱讀完整內容

AngularJS (13) <form name=""> 區分所屬表格

作者： Tshuà Bûn-lī (蔡文莉) - 8月 25, 2014

大家應該都看過表格取名，name <form name="form1"> 這有什麼幫助嗎？當然！當你撰寫多個表格時，如果沒有name，你可能要不時翻找這筆輸入來自哪個表格。好比說，你做了三個表格： <body ng-app="app1" ng-controller="Controller1"> <form><input ng-model="username"/></form> <form><input ng-model="address"/></form> <form><input ng-model="phone"/></form> ...(這中間你可能還有一長串的html) {{username}} {{address}} {{phone}}  </body> 這可能造成你不容易修改表格，或是得反覆確認表格的值對應到哪個函式，例如：表格一的輸入要給變數甲，但是表格二的要給乙。挺累人吧？若是表格加入name，AngularJS會把表格的名稱做為「區域名稱」，就能大大改善前述問題。 <body ng-app="app1" ng-controller="Controller1"> <form name="form1"><input ng-model="form1.username"/></form> <form name="form2"><input ng-model="form2.address"/></form> <form name="form3"><input ng-model="form3.

閱讀完整內容

AngularJS (10-2) $http.get 讀json

作者： Tshuà Bûn-lī (蔡文莉) - 8月 21, 2014

本篇完整程式碼：( Plunkr ) $http.get('XXX.json') 就可以讀取json檔了。若你不清楚$http.get()或是.success()，請看前一篇文章： AngularJS (10) $http.get 讀檔實例我有兩個人的資料，人名和地址。我想把他們顯示在網頁上。 Lily, ooh Ihc, lala test.json text.json 用到兩種括號，意義是 [] = array，{} = list。字串要有" "。 [ { "name":"Lily", "addr":"Hualien" }, { "name":"Ihc", "addr":"Taipei" } ] HTML 假設我們只是想要印出人名和地址，這樣寫就夠了。注意，不管在HTML或是JS，json變數的.name, .addr不需要" "。 <body ng-app="app1" ng-controller="HelloController"> <p ng-repeat="item in list"> {{item.name}}, {{item.addr}} </p> </body> JS 初始化一個空陣列$scope.list，再用$http.get()讀取text.json。 var app = angular.module("app1",[]) app.controller("HelloController", ['$scope','$http',function($scope, $http){ $scope.list=[]; $http.get('test.json').success(function(data

閱讀完整內容

AngularJS (11) $http.get + templateUrl + scope 讀檔後匯入樣版

作者： Tshuà Bûn-lī (蔡文莉) - 8月 15, 2014

本篇完整程式碼請看 Plunkr 我們在前一篇也說過，控制器可以定義值，再透過它範疇內的宣告標籤傳值到樣版。範疇的大致概念如下： <div ng-controller="某控制器"> <宣告標籤></宣告標籤> </div> 而樣版就像是句型一樣，讓我們可以餵值進去。但是，如果餵進去的數值很多時，有沒有可能用讀檔的方式把大量的值傳給樣版呢？答案是可以。大致解法是，先用$http.get()讀變數檔，再透過宣告標籤的templateUrl、scope將$http.get()的值餵給樣版。這麼說有點籠統(掩面)，我們來看實例吧。實例今天你有了六個朋友的資訊，人名、地址，希望把他們照某個樣版顯示。 Lily Hualien Ihc TsiongHua Suisui2 Hualien Suisui Hualien Piggu Hualien Chhueh TsiongHua I'm ________, and I come from ________. 這是你想要的樣版。朋友資訊那麼多，而且以後還會一直增加新好友，你當然就不希望把朋友資訊寫死在script，以免不容易維護程式。所以，最好的解法就是把你朋友的資料寫在一個文字檔，並用script去讀取它。朋友資訊.txt Lily Hualien Ihc TsiongHua Suisui2 Hualien Suisui Hualien Piggu Hualien Chhueh TsiongHua template.html I'm {{friendName}}, and I come from {{friendAddr}}.<br/> 它存了句型 I'm ________, and I come from ________. 。人名和地址的填空處用樣版變數friendName，friendAddr表示。 JS 第一步：在控制器用$http.get()讀檔要能夠顯示朋友的資料，當然首要做的就是讀出朋友資訊.txt的值，存到某個陣列變數內。作法如下 app = angular.module("app1",[])

閱讀完整內容

AngularJS (10) $http.get 讀檔

作者： Tshuà Bûn-lī (蔡文莉) - 8月 14, 2014

有時候，你可能希望一些變數的數值或是文字資料能夠用匯入網頁的方式，方便隨時修改或更新資料，那麼$http.get()可以幫助你。 $http.get(檔名) 幫你讀取檔案到script內，不論是.txt 或是 .json。實例 ( Plunkr ) 假設你今天想在網站上，秀出六位好友的名單。 Lily Ihc Suisui2 Suisui Piggu Chhueh 你可以把他們的名字直接寫成一個陣列，但以後就得不斷到此更新朋友名單，並不是很方便。所以，乾脆把他們的名字存成一個文字檔吧！朋友名單.txt Lily Ihc Suisui2 Suisui Piggu Chhueh index.html 我們先決定一下要怎麼呈現朋友名單，那......直接印出來吧！同時也宣告ng-app和ng-controller。 <body ng-app="app1"> <div ng-controller="NameController"> <p ng-repeat="name in list">{{name}}</p> </div> </body> list 是控制器NameController的陣列變數，用來儲存朋友名字。 JS 我們在控制器用$http.get(...)讀出一個個名字，並丟進變數list中，才能讓index.html正常顯示朋友名字。 var app = angular.module("app1",[]); app.controller('NameController', ['$scope', '$http', function($scope, $http) { $scope.list = []; $http.get('朋友名單.txt').success(function(data){ angular.forEach(data.split('\n'), function(name, ind){ $

閱讀完整內容

Bootstrap3.2.0 起首用container還是container-fliud？

作者： Tshuà Bûn-lī (蔡文莉) - 8月 10, 2014

我個人啦，認為寫網站第一步，比較麻煩的就是定出網頁最外圍的版面大小。有時，為了寫滿版的網頁，需要先確定body的高度是100%。 body { height:100%; } ... 有時，可能得先寫出某個適當寬度的外框，不是寫死寬度，就是寫好相對寬度的百分比之後，還得設min-height以防網頁縮小後跑版。 .wrapper { width:793px; } 或是 .wrapper { width:50%; height:50%; min-width:400px; min-height:50px; } /*可能還得加上 @media screen and (min-width:???px)...唉 @_@*/ 不過，Bootstrap3框架已經幫我們定義好網頁大小的基本版型，所以上面的問題都能輕鬆解決囉。 .container <body> <div class="container"> ... </div> </body> .container 幫我們定義了適當寬度(適不適當就見仁見智啦...)，也就是左右有稍微留白。很適合簡單的網誌或是小型網站。螢幕寬度>768px，.container 750px 螢幕寬度>992px，.container 970px 螢幕寬度>1200px，.container 1170px .container-fluid <body> <div class="container-fluid"> ... </div> </body> .container-fluid沒有設寬度，所以一直是滿版，適合用在需要一直滿版的網站。以上介紹到這，來看看兩者實際上的差異。 .container vs .container-fluid ( Plunkr ) <body> <div class="container-fluid">...</div> <d

閱讀完整內容

AngularJS (9) directive templateUrl與scope

作者： Tshuà Bûn-lī (蔡文莉) - 8月 10, 2014

本篇完整程式碼請看 Plunkr HTML樣版，既然是為了讓HTML更有組織性、更好管理，除了像 AngularJS (8) directive templateUrl 儲存一般的字串，其實樣版就像中文句型一樣，可以替換文字。以中文句型來說，我的名字是 Lily 我的名字是 Ihc 我的名字是 _____ 這個句型其實就是一個樣版。要丟進樣版的值從哪裡來？宣告標籤會沿用控制器的作用範疇，連結控制器的變數到樣版的變數。簡單來說 <div ng-controller="控制器1"> <宣告標籤></宣告標籤> </div> 和 <div ng-controller="控制器2"> <宣告標籤></宣告標籤> </div> 雖然都用同一個宣告標籤，但是上面的宣告標籤沿用控制器1的scope，下面的宣告標籤則是沿用控制器2的scope。什麼是「宣告標籤沿用控制器的作用範疇」？延續 AngularJS (8) 用樣版顯示兩次歡迎文字後，我們還想要在第一頁印出兩位網誌作者的名字。 Hi, I'm the author LILY. Hi, I'm the author IHC. 當然嚕，你不覺得Hi, I'm the author _____ 可以做成一個樣版嗎？就來做吧！作者樣版.html The author {{authorInfo.name}}.<br /> authorInfo是要替換文字的變數，authorInfo.name則是要替換的name值。 JS 控制器樣板只是句型，要替換的作者名字存在控制器裡，為了方便直接用兩個變數分別存名字。 app.controller('myControl', ['$scope', function($scope) { $scope.lily = { name: 'LILY' }; $scope.ihc = { name: 'IHC' }; }]);

閱讀完整內容

AngularJS (8) directive templateUrl

作者： Tshuà Bûn-lī (蔡文莉) - 8月 09, 2014

本篇完整程式碼請看( Plunkr ) 當HTML很長或是有重複的內容時，為了讓HTML更好管理、更有組織，所以將很長的內文或是重複的內容抽出放到樣版(template)裡，讓HTML模組化。 AngularJS的宣告標籤有個參數，templateUrl，指定要匯入哪份樣版到HTML頁面。而且，宣告標籤的位置，就決定了樣版匯入到HTML的地方。舉個例子，我們想在網頁第一頁的開頭顯示一段歡迎文，讓網友覺得親切。 Hello, everyone. Welcome to Titiau. 如果是一般的HTML寫法： <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> </body> 問題是，這個歡迎文可能很常用，總不能一直複製貼上吧？ <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ... <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ...  </body> 所以我們不直接寫死在第一頁，而是把歡迎文字寫到一個樣版。歡迎文字的樣版 greet.html Hello, everyone.<br/> Welcome to Titiau.<br/> <br/> JS 為了能夠匯入歡迎樣版到第一頁，我們得定義一個連結到歡迎樣版的宣告標籤。 var app = angular.module("app1",[]); app.directive(&

閱讀完整內容

ng-repeat無法顯示重複元素的解法

作者： Tshuà Bûn-lī (蔡文莉) - 8月 09, 2014

<p ng-repeat="num in [1,1,1]">{{num}}</p> 會出現ERROR訊息"duplicates in a repeater are not allowed"，因為ng-repeat不允許重複元素。解決方法 <p ng-repeat="num in [1,1,1] track by $index">{{num}}</p> 1 1 1

閱讀完整內容

Bootstrap3.2.0 導覽列寫法拆解

作者： Tshuà Bûn-lī (蔡文莉) - 8月 09, 2014

最基本的導覽列框架整理如下，因為我自己被表太多次了(XD)。至於導覽列的內容請再參考 bootstrap3的navbar ，若有機會再補上。 .navbar 起手式 <body> <div class="navbar" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-default 基本背景樣式 .navbar-default 使得導覽列有淺灰漸層的背景。 <body> <div class="navbar navbar-default" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-static-top 置上 .navbar-static-top 置上，不過它會增加1px的border，讓導覽列稍微被撐寬。 <body> <div class="navbar navbar-static-top" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-fixed-top 置上 <body> <div class="navbar navbar-fixed-top" role="navigation"> <a class="navbar-bran

閱讀完整內容

AngularJS (7) directive 自定元素

作者： Tshuà Bûn-lī (蔡文莉) - 8月 06, 2014

directive的基本介紹有提到，directive宣告子可以讓我們自定屬性 <div my-dir> 自定元素 <my-dir> 自定CSS <div class="my-dir"> 注意到自定元素不同於自定屬性，可以直接當作<...>。但其實，自定元素只要比自定屬性多一個restrict參數就好了！ Restrict 官方的宣告子說明提到，預設宣告子只可以自定屬性，所以若是要自定元素或是CSS樣式，必須要修改restrict。以下為restrict的選項： 'A' - 只能用在自定屬性 'E' - 只能用在自定元素 'C' - 只能用在自定CSS 也可以合併使用 'AEC' - 用在自定屬性、元素、和CSS 自定元素的實例先看看用自定屬性印出"Hello world!!"的例子 <body ng-app="app1"> <div my-greet></div> </body> 自定屬性的宣告方式 var app1 = angular.module("app1",[]); app1.directive('myGreet', function(){ return { template: "Hello world!!" }; }); 要改成自定元素啦！把return裡面加上參數restrict，指定宣告子myGreet是自定元素。 return { restrict:'E', template: "Hello world!!" }; 修改一下HTML <body ng-app="app1">  <my-greet> </b

閱讀完整內容

AngularJS (6) directive 基本介紹

作者： Tshuà Bûn-lī (蔡文莉) - 8月 05, 2014

directive ，宣告子，讓我們自定屬性、標籤、或是CSS樣式。 <div my-dir> <my-dir> <div class="my-dir"> 目前我知道的，宣告子用來匯入外部HTML、綁定javascript事件如滑鼠或鍵盤、和控制器溝通。宣告子的命名方式，在javascript用駝峰式大小寫(camel-case)。 "myDir" 在HTML建議用破折號(dash-delimited format)。 <my-dir> 先來看自定屬性的宣告方式，下篇再聊如何自定標籤和自定CSS。一個宣告子 ( Plunkr ) 我們想要印出"Hello world!!"字樣，首先在<head>宣告了my-greet。 <head> <script> var app1 = angular.module("app1",[]); app1.directive('myGreet', function(){ return { template: "Hello world!!" }; }); </script> </head> 在<body>呼叫自定屬性的myGreet，在HTML改稱為my-greet。 <body ng-app="app1"> <div my-greet></div> </body> 一個宣告子和一個控制器宣告子可以使用控制器的變數。正確來說，宣告子沿用控制器的scope。我們改寫上例，用控制器儲存名字 "Lily" 。 <body ng-app="app1"> <div ng-controller="HelloController"> &l

閱讀完整內容