1、学习中，功能很简单，就是个星形级别，依赖于Bootstrap和Angularjs。
2、ng-model是显示值，editable是否可以点击，max-value最大值。
3、很多东西想到了但是没有实现，不知道如何下手，求指点。比如性能上的问题；是否
要把Bootstrap和Angularjs中相关的库之类的抽出来，以便封装在一起，不需要依赖其
它内容；参数没有设定默认值；ng-model绑定的值应当小于max-value；editable判断是
否为真应当限制只有true和false两种情况，而且现在用的是字符串的判断形式，不靠谱
；没考虑浏览器兼容。。。更不要说其它想都没想到的问题了。
4、顺便问一下，ng-repeat如何指定循环次数？比如重复5次，或者针对一个数组只重复
前若干项or后若干项这种要求。要用index做filter吗？没尝试过不知道能不能实现。
组件代码：
angular.module("StarBar", []).directive("dhStarbar", function () {
return {
restrict: 'EA',
scope: {
value: "=ngModel",
editable: "@",
maxValue: "@"
},
template: function (tElement, tAttrs) {
var _html = '';
for (var i = 1; i <= tAttrs.maxValue; i++) {
_html += '<span ng-class="{true:\'glyphicon glyphicon-star\'
, false:\'glyphicon glyphicon-star-empty\'}[value>=' + i + ']" ng-click="Cli
ckStar(' + i + ')"></span>';
}
return _html;
},
controller: function ($scope, $element, $attrs) {
$scope.ClickStar = function (clickedStars) {
if(angular.equals($scope.editable,"true"))
{
$scope.value = clickedStars;
}
};
}
};
});调用代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div ng-app="teststarbarapp">
<p ng-controller="teststarbarcontroller">
<dh-starbar ng-model="value1" editable="true" max-value="5"></dh-sta
rbar></p>
<dh-starbar ng-model="value2" editable="false" max-value="5"></dh-st
arbar></p>
<input type="number" ng-model="value2">
</div>
</body>
<link rel="stylesheet" href="js/bootstrap-3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.3.5/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/AngularJS/angular.min.js"></script>
<script type="text/javascript" src="components/StarBar.js"></script>
<script>
angular.module('teststarbarapp', ['StarBar']).controller('teststarbarcon
troller', function ($scope) {
});
</script>
</html>--
FROM 140.206.72.*