快捷導(dǎo)航

Angularjs CURD 詳解及實(shí)例代碼

更新時(shí)間：2016年09月14日 11:40:24 作者：garfieldzf

這篇文章主要介紹了Angularjs CURD 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

Angularjs CURD

前言

基于一個(gè)手機(jī)端的項(xiàng)目使用了angularjs，硬著頭皮去用，有很多的疑問(wèn)還需要一一去驗(yàn)證，剛開(kāi)始總是感覺(jué)找不到北，總是感覺(jué)有很多概念，而且似乎ng既夾雜MVC又夾雜MVVM的思想，忙里偷閑敲了個(gè)簡(jiǎn)單的CURD demo。當(dāng)然順著這個(gè)demo還可以延伸很多知識(shí)點(diǎn)，比如：帶分頁(yè)查詢、連接后臺(tái)數(shù)據(jù)庫(kù)、調(diào)用WebApi、分層使用Servcice、Factory。

效果圖

<script type="text/javascript">

    var app=angular.module('myApp',[]);

    app.controller('empCtrl',function($scope){

      $scope.emparr=[];

       

      //添加

      $scope.btnclk=function(){

        $scope.emparr.push({'arr_id':$scope.id,'arr_name':$scope.name,'arr_desg':$scope.desg});

        $scope.id='';

        $scope.name='';

        $scope.desg='';

      }

      var key='';

      //編輯

      $scope.edit=function(emp,indx){

        key=indx;

        console.log(indx);

        console.log(emp);

        $scope.id=emp.arr_id;

        $scope.name=emp.arr_name;

        $scope.desg=emp.arr_desg;

      }

      //修改

      $scope.btnupd=function(id,name,desg){

        $scope.emparr[key].arr_id=id;

        $scope.emparr[key].arr_name=name;

        $scope.emparr[key].arr_desg=desg;

         

        $scope.id='';

        $scope.name='';

        $scope.desg='';

      }

       

      $scope.del=function(id){

        $scope.emparr.splice(id,1);

      }

    });

  </script>

以上就是對(duì)AngularJS CURD 的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

解決ionic和angular上拉加載的問(wèn)題
這篇文章主要介紹了解決ionic和angular上拉加載的問(wèn)題,需要的朋友可以參考下
2017-08-08
angularJS開(kāi)發(fā)注意事項(xiàng)
本篇文章給大家分享了angularJS開(kāi)發(fā)注意事項(xiàng)以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友參考學(xué)習(xí)下。
2018-05-05
詳解ionic本地相冊(cè)、拍照、裁剪、上傳（單圖完全版）
本篇文章主要介紹了ionic本地相冊(cè)、拍照、裁剪、上傳（單圖完全版），非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
Angular 組件之間的交互的示例代碼
這篇文章主要介紹了Angular 組件之間的交互的示例代碼，根據(jù)數(shù)據(jù)的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過(guò)服務(wù)傳遞三種交互方法。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-03-03
angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
詳解Angular 開(kāi)發(fā)環(huán)境搭建
Angular 是一款開(kāi)源 JavaScript 框架，使開(kāi)發(fā)和測(cè)試變得更加容易,這篇文章主要介紹了詳解Angular 開(kāi)發(fā)環(huán)境搭建,需要的朋友可以參考下
2017-06-06
AngularJS中的指令實(shí)踐開(kāi)發(fā)指南(二)
這篇文章主要介紹了AngularJS中的指令實(shí)踐指南(二)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
淺析AngularJS中的指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令
2016-03-03
Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
angularJS Provider、factory、service詳解及實(shí)例代碼
這篇文章主要介紹了angularJS Provider詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09