Angularjs CURDの詳細および実例コード

Angularjs CURD

前書き

　　　　　　 スマートフォン向けのプロジェクトを基にAngularJSを使用し、頑張って使ってみました。多くの疑問があって一つずつ確認する必要がありました。最初はどこに行けばいいのかわからず、多くの概念があって、ngはMVCとMVVMの思想が混ざっているように感じました。暇な時間に簡単なCURDデモを作成しました。もちろん、このデモを延ばせば多くの知識が得られます。例えば：ページング付きのクエリ、バックエンドデータベースの接続、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> 

これで AngularJS CURD の情報をまとめました。今後も関連する情報を追加していく予定です。皆様の本サイトへのサポートに感謝します。

声明：この記事の内容はインターネットから取得しており、著作権者はすべての権利を保有しています。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害が疑われる内容がある場合は、メールを notice#w までお送りください。3codebox.com（メール送信時は、#を@に変更してください。通報を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは侵害される内容をすぐに削除します。）