Page 86 - 4-4studylife

77

<p>ติดต่อสอบถาม <a

href="mailto:software@rmutp.ac.th">software@rmutp.ac.th</a></p>
</div>

</div>

</div>
<div class="fnpc">

<img src="img/student-male.png" alt="student-npc">

</div>
</div>

</ion-footer-bar>

</ion-view>

้
ั
ี
้
่
้
ั
ี
ุ
ื
์
ั
ในไฟล www/views/login.html น้นจดหลก ๆ ท่ตองสนใจคอกลองขอความท่ใชสำหรบกรอกขอมล
ู
้
ชื่อผู้ใช้ และรหัสผ่าน ถ้าผู้พัฒนาสังเกตให้ดีจะพบว่าเป็น Tag Input ตามปกติ แต่สิ่งที่พิเศษคือภายใน Input
ี
จะม Attribute พิเศษที่ชื่อว่า ng-model บรรจุไว้อยู่ ซึ่งจะกำหนดกล่องข้อความทั้ง 2 ว่ามค่า ng-model =
ี
“user.info.username” และ ng-model = “user.info.password” หมายความว่าตัวแปรที่ใช้เป็น Object
ที่มีชื่อว่า user.info มี Property ที่ชื่อ username และ password เอาไว้สำหรับเก็บข้อมูลชื่อผู้ใช้ และ
รหัสผ่าน

ไฟล www/views/login.html (บางส่วน)
์
…
<label class="item item-input">
<span class="input-label">{{label.username}}</span>
<input type="text" ng-model="user.info.username" required>

</label>

<label class="item item-input">
<span class="input-label">{{label.password}}</span>

<input type="password" ng-model="user.info.password" required>

</label>
…

คู่มือการพัฒนาแอปพลิเคชัน Study Life