angularjsでヒストグラムの動的読み込みを実装する方法-jsチュートリアル-php.cn

angularjsでヒストグラムの動的読み込みを実装する方法

亚连

リリース： 2018-06-21 14:40:21

オリジナル

1497 人が閲覧しました

この記事では主にangularjsでのヒストグラムの動的読み込みの例を紹介していますが、編集者が非常に良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

1 準備

1. 参考ファイル

以下のリンクにjquery.jsファイルがありますので、index.html内に引用してください。

2.新しいファイルを作成します

新しいjsファイルを作成し、手順を記述します。私も命令を書くのは初めてですが、命令は拡張性が高く、プロジェクト内で一部のエフェクトを再利用する場合に、命令を使用して冗長なコードを減らすことができます。

2 コードの書き方

/**
 * Created by xiehan on 2017/12/8.
 * 柱状图动态加载指令
 */
angular.module(&#39;studyApp.directives&#39;)
 .directive(&#39;progressPer&#39;, function ($compile,$timeout) {
  return {
   restrict: &#39;AE&#39;,
   scope: {
    progressData: &#39;=&#39;
   },
   template: &#39; <p class="progress-main" ng-repeat="item in progressData">&#39;+
   &#39;<p class="progress-data">&#39;+
   &#39;<span>{{item.name}}</span>&#39;+
   &#39;<p class="skillbar clearfix " data-percent={{item.width}}>&#39;+
    &#39;<p class="skillbar-bar"></p>&#39;+
     &#39;<p class="skill-bar-percent">{{item.sum}}</p>&#39;+
    &#39;</p>&#39;+
   &#39;</p>&#39;+
   &#39;<p class="progress-rate">{{item.percent}}</p>&#39;+
   &#39;</p>&#39;,
   replace: true,
   transclude: true,
   link: function (scope, element, attrs) {
    $compile(element.contents())(scope.$new());
    $timeout(function() {
     jQuery(&#39;.skillbar&#39;).each(function(){
      jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
       width:jQuery(this).attr(&#39;data-percent&#39;)
      },1000);
     });
    });
   }
  }
 });

ログイン後にコピー

/**
 * Created by xiehan on 2017/11/29.
 * controller文件
 */
angular.module(&#39;studyApp.controllers&#39;)
 .controller(&#39;ProgressCtrl&#39;, function ($scope, $rootScope, $ionicHistory,$timeout,$location) {
  $scope.title = &#39;进度条效果&#39;;
  $scope.goBack = function () {
   $ionicHistory.goBack();
  };
  var dataInfo=[
   {
    NAME:"测试1",
    NUM:30,
    RATE:30
   },
   {
    NAME:"测试2",
    NUM:25,
    RATE:25
   },
   {
    NAME:"测试3",
    NUM:45,
    RATE:45
   }
  ];

  handleTabData(dataInfo);
  function handleTabData(data){
   var widthData=[];
   for(var i = 0;i<data.length;i++){
    widthData.push({
     width:data[i].RATE+&#39;%&#39;,    //进度条百分比
     name:data[i].NAME,      //标题
     sum:data[i].NUM,       //数量
     percent:data[i].RATE+&#39;%&#39;});  //百分比
   }
   $scope.handleDataInfo = widthData;
   //不使用指令加上下面的代码
   // $timeout(function() {
   //  jQuery(&#39;.skillbar&#39;).each(function(){
   //   jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
   //    width:jQuery(this).attr(&#39;data-percent&#39;)
   //   },1000);
   //  });
   // });
  }
 });

ログイン後にコピー

rreerree

3 レンダリング