Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

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

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

เริ่มหัวข้อใหม่

xxxxxxxx

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

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

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

Date : 2015-09-13 12:05:47

By : takky12345

View : 2410

Reply : 2

No. 1

TC Admin

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

จัดไปครับ

Date : 2015-09-13 12:24:22

By : mr.win

No. 2

ljfeinthedeep

โพสกระทู้ ( 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

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)