пользовательский индикатор выполнения AngularJS отвечает в соответствии с перечнем позиций

Я создаю индикатор выполнения. теперь я пытался прикрепить список значений с помощью флажка с индикатором выполнения, значит, когда флажок установлен или не установлен, индикатор выполнения отвечает соответственно. HTML-код является: progress_bar.hmtlпользовательский индикатор выполнения AngularJS отвечает в соответствии с перечнем позиций

<html ng-app="Progress"> 
 
<head> 
 
\t <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
\t <script type="text/javascript" src = "progresss.js"></script> 
 
</head> 
 
<body> 
 
\t <div ng-controller="progress-controller"> 
 
\t \t <div progressbar="list"></div> 
 
\t \t <ul class="todo-list"> 
 
\t \t  <li ng-repeat="list in lists" ng-model="list"> 
 
\t \t  <input type="checkbox"/> 
 
\t \t  <label for="" >{{list}}</label> 
 
\t \t  </li> 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
</html>

progresss.js:

angular.module("Progress", []) 
 
.controller("progress-controller", ['$scope', function($scope) { 
 
    
 
    $scope.lists = ["fruits" , "eggs" , "grocery"]; 
 
}]) 
 
.directive('progressbar', [function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      'progress': '=progressbar' 
 
     }, 
 
     controller: function($scope, $element, $attrs) { 
 
      $element.progressbar({ 
 
       lists: $scope.progress 
 
      }) 
 

 
      $scope.$watch(function() { 
 
       $element.progressbar({lists: $scope.progress}) 
 
      }) 
 
     } 
 
    } 
 
}])

это я пытался до сих пор и застрял .... пожалуйста помогите мне, как этого добиться. спасибо

источник

2015-12-03 amark

ли вы хотите прогресс-бар расти/сокращаться в соответствии на количество выбранных флажков? –

да @walt предположим, если у меня есть 4 флажок, и только 3 проверены, тогда индикатор выполнения будет заполнен почти на 75% .. и из тех 3, если еще один нечетный, а затем индикатор выполнения становится наполовину заполненным .. и так далее – amark

Пожалуйста, см. Мой ответ –

Вы можете использовать директиву и директиву ngStyle. Пожалуйста, смотрите работает jsfiddle

<div class="container" data-ng-controller="ItemsController as vm"> 
    <div class="row"> 
     <div class="col-md-4 border"> 
      <div class="form-horizontal" data-checkbox-progress="" data-items="items"> 
       <div class="checkbox" data-ng-repeat="item in items"> 
        <label> 
         <input type="checkbox" ng-model="item.checked"> {{item.label}} 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Javascript

angular.module('application', []) 
.directive('checkboxProgress', ['$compile', function ($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
      items: '=items' 
     }, 
     link: function (scope, element, attr) { 
      scope.items = scope.items || []; 
      scope.progressStyle = function() { 
       var count = 0; 
       for (var i = 0; i < scope.items.length; i++) { 
        if (scope.items[i].checked) { 
         count++; 
        } 
       } 

       var total = ((count/scope.items.length) * 100).toString() + '%' 
       return { 
        'width': total 
       } 
      }; 

      var progressbar = angular.element('<div class="progress-wrapper"><div class="progressbar" ng-style="progressStyle()"></div></div>'); 
      $compile(progressbar)(scope, function (clonedElement) { 
       element.prepend(clonedElement); 
      }); 
     } 
    }; 
}]).controller('ItemsController', ['$scope', function ($scope) { 
    $scope.items = [{ 
     label: 'Item 1' 
    }, { 
     label: 'Item 2' 
    }, { 
     label: 'Item 3' 
    }, { 
     label: 'Item 4' 
    }]; 
}])

Объяснение:

директива добавляет индикатор перед элементом директива вызвана.

Мы должны использовать службу $compile, прежде чем мы добавим элемент progressbar в DOM, поскольку элемент содержит угловой код.

scope.progressStyle это функция, которая возвращает объект, ключи имена и значение стилей CSS являются соответствующими значениями для этих ключей CSS (ширина: 100%).

источник

2015-12-03 11:47:16

@walt thnx man .. но что это за классы и где он используется как: col-md-4 border, row, form-horizontal, checkbox ?? – amark

'.col-md-4'' row'' form-horizontal' и 'checkbox' являются классами начальной загрузки. http://getbootstrap.com/css/ 'border' - мой собственный класс для создания границы. Не забудьте отметить ответ, если это поможет. –

пользовательский индикатор выполнения AngularJS отвечает в соответствии с перечнем позиций

ответ

Смежные вопросы