Question

我正在创建一个进度条。现在我尝试使用带有进度条的复选框附加值列表，表示当复选框被选中/取消选中时，进度条会相应地响应。 HTML是： progress_bar.hmtl

＆＃13;

A.li

＆＃13;

progresss.js：

＆＃13;

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

＆＃13;

这个我到目前为止尝试过并且卡住....请帮助我实现这一目标。感谢

Answer 1

您可以使用指令和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'
    }];
}])

解释：

该指令在调用该指令的元素之前添加进度条。

在我们将progressbar元素添加到DOM之前，我们必须使用$compile服务，因为元素包含角度代码。

scope.progressStyle是一个函数，它返回一个对象，其键是CSS样式名称，值是这些CSS键的对应值。（宽度：100％）

自定义进度条AngularJS相应地响应项目列表

1 个答案: