app.js
เป็นไฟล์ที่เก็บ Module ของ application
(function(){
app = angular.module('myapp',[]);
app.controller('ImageView',function(){
this.image='Image1.jpg';
});
})();
อธิบาย :
- ประกาศ Module ชื่อ myapp เพื่อนำไปใช้อ้างอิงใน ng-app
- สร้าง Controller ชื่อ ImageView โดยมีตัวแปร image เก็บ Path ของไฟล์รูป เพื่อใช้อ้างอิงในการแสดงผล
image.html
เป็นไฟล์ที่ใช้แสดงผลบน Browser
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" ng-controller="ImageView as Image">
<div class="col-md-12">
<img ng-src="{{Image.image}}" />
</div>
</div>
</div>
</body>
</html>
อธิบาย :
- อ้างอิง module ที่ชื่อ myapp จาก ng-app
- include ไฟล์ app.js
- เรียกใช้ Controller ที่ชื่อ ImageView โดยทำการตั้ง Alias name เพื่อสะดวกในการเขียนโปรแกรม
- Directive ng-src ทำการแสดง Path รูปภาพ จากตัวแปร image
จากนั้นทำการปรับแต่งรูปแบบการแสดงผล ให้แสดงหลายๆภาพได้ โดยเพิ่ม Controller ที่ชื่อ ImageViewRepeat ใน app.js ดังนี้
app.js
(function(){
app = angular.module('myapp',[]);
app.controller('ImageView',function(){
this.image='Image1.jpg';
});
app.controller('ImageViewRepeat',function(){
this.imageArr=['Image1.jpg' , 'Image2.jpg'];
});
})();
อธิบาย :
- สร้าง controller ชื่อ ImageViewRepeat
- สร้างตัวแปร imageArr เป็นตัวแปรประเภท Array เก็บ Path ไฟล์จำนวน 2 ภาพ
image.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="row" ng-controller="ImageViewRepeat as ImageRep">
<div class="col-md-12" ng-repeat="image in ImageRep.imageArr">
<img ng-src="{{image}}" width='50px' height='50px' />
</div>
</div>
</body>
</html>
อธิบาย :
- แก้ไข .row โดยเปลี่ยนชื่อ Directive Controller เป็น ImageViewRepeat as ImageRep
- ใช้ Directive ng-repeat เพื่อวนลูปดึง Path รูปภาพใน array มาแสดงผล
ผลลัพธ์ที่ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น