Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Client Script Forum > วันนี้เอา วิธีการเขียน AngularJs แบบ เพิ่มรายการใน ตารางมาแชร์ครับ ซึ่งทำแบบ Dynamic assign ng-model



 

วันนี้เอา วิธีการเขียน AngularJs แบบ เพิ่มรายการใน ตารางมาแชร์ครับ ซึ่งทำแบบ Dynamic assign ng-model

 



Topic : 118856



โพสกระทู้ ( 6 )
บทความ ( 0 )



สถานะออฟไลน์




วันนี้เอา วิธีการเขียน AngularJs แบบ เพิ่มรายการใน ตารางมาแชร์ครับ ซึ่งทำแบบ Dynamic assign ng-model
Conceptual: ใช้ Directive ng-repeat เป็น keyword สำหรับการทำงาน นี้ Case นี้
ไม่ต้องอธิบายมาก ถ้าเข้าใจ Concept การเขียนไม่ยาก ดูตัวอย่างจากรูปครับ


angularJS Code

angularjs code

Code (JavaScript)
angular.module('test', []).controller('testApp', function($scope){

    
    $scope.itemsList = [];
    $scope.add = function(){
        $scope.itemsList.push({'name': '', 'mobile': '', 'sex': ''});
    };
    $scope.cancel = function(index){
        $scope.itemsList.splice(index, 1);
    };
    $scope.cancelAll = function(){
        $scope.itemsList = [];
    };
    $scope.copy = function(index){
        $scope.itemsList.push({'name': $scope.itemsList[index].name
                               , 'mobile': $scope.itemsList[index].mobile
                               , 'sex': $scope.itemsList[index].sex});
    };
    $scope.showValue = function($item){
        alert("name: " + $item.name + "\n" +
              "mobile: " + $item.mobile + "\n" +
              "sex: " + $item.sex
        );
    };
});



HTML CODE

[File angular.min.js ตัวนี้หาโหลดในเว็บ angularjs.org ได้เลยครับ
File xxx.js ให้เอาโค้ด จากรูปภาพ javascript code สร้างเป็นไฟล์ แล้วตั้งชื่อ xxx.js (หรือชื่ออะไรก็ได้ตามใจเรา แต่ต้องเปลี่ยน xxx.js ให้เป็นชื่อไฟล์เราด้วย)

html code

Code
<html> <head> <title>Demo angularjs how to write code for dynamic ng-model, generate table row</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="xxx.js"></script> </head> <body ng-app="test" ng-controller="testApp"> <button type="button" ng-click="add()">Add Row</button> <button type="button" ng-click="cancelAll()">Cancel All</button> <p>&nbsp;</p> <table style="width: 55%;"> <thead> <tr><th style="width: 10%;">#</th> <th style="width: 22%;">Name</th> <th style="width: 18%;">Mobile</th> <th style="width: 11%;">Sex</th> <th style="width: 12%;">...</th> </tr> </thead> <tbody> <tr ng-repeat="(index, item) in itemsList"> <td>{{index+1}}</td> <td><input type="text" ng-model="item.name" /></td> <td><input type="text" ng-model="item.mobile" /></td> <td><input type="text" ng-model="item.sex" /></td> <td> <button type="button" ng-click="showValue(item)">Show Value</button> <button type="button" ng-click="cancel(index)">Delete</button> <button type="button" ng-click="copy(index)">Copy</button> </td> </tr> </tbody> </table> </body> </html>




Tag : HTML/CSS, JavaScript, Ajax, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-09-13 12:05:47 By : takky12345 View : 2264 Reply : 2
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

จัดไปครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-09-13 12:24:22 By : mr.win
 


 

No. 2



โพสกระทู้ ( 120 )
บทความ ( 0 )



สถานะออฟไลน์


สอบถามหน่อยครับ ถ้าเรา จะทำการแก้ไขแบบ multi row ใน ng-repeat ต้องทำประมาณไหนครับถ้ามี filter ด้วย
อันนี้เป็นปัญหาที่ผมเจอ รบกวนด้วยครับ
ขอบคุณครับ

https://www.thaicreate.com/php/forum/118710.html
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-09-17 08:42:38 By : tam78910
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : วันนี้เอา วิธีการเขียน AngularJs แบบ เพิ่มรายการใน ตารางมาแชร์ครับ ซึ่งทำแบบ Dynamic assign ng-model
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่