Javascript 使用angularjs渲染星级系统_Javascript_Angularjs

Javascript 使用angularjs渲染星级系统

javascript angularjs

Javascript 使用angularjs渲染星级系统,javascript,angularjs,Javascript,Angularjs,我的应用程序在这里我需要从http服务动态地呈现一个星级评定系统，其中当前星级和最大星级可以随情况而变化从$scope.current和 $scope.max-$scope.current并传递它们，然后在它们上面运行ng repeat，或者有比这更优化的解决方案。您可以像这样放置一组对象： var starApp = angular.module('starApp',[]); starApp.controller ('StarCtrl', ['$scope', function ($s

我的应用程序在这里我需要从http服务动态地呈现一个星级评定系统，其中当前星级和最大星级可以随情况而变化

从

$scope.current

和

$scope.max-$scope.current

并传递它们，然后在它们上面运行

ng repeat

，或者有比这更优化的解决方案。

您可以像这样放置一组对象：

var starApp = angular.module('starApp',[]);

starApp.controller ('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [];
    var rating = {
         current : 5, 
         max : 10
    }
    $scope.ratings.push(rating);  // instead you would push what your http service returns into thearray. 

}]);

<body ng-app="starApp">
    <div ng-controller="StarCtrl">
        <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}}</span>
    </div>
</body>

然后在您看来，您可以使用ng repeat，如下所示：

var starApp = angular.module('starApp',[]);

starApp.controller ('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [];
    var rating = {
         current : 5, 
         max : 10
    }
    $scope.ratings.push(rating);  // instead you would push what your http service returns into thearray. 

}]);

<body ng-app="starApp">
    <div ng-controller="StarCtrl">
        <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}}</span>
    </div>
</body>


{{rating.current}}超出{rating.max}

星级评定可以静态（只读）或动态进行

如果您只想简单地将评级显示为星号，请尝试下面的方法

静态星级评级

angular.module('starRatings',[]).directive('starRating', function () {
        return {
            restrict: 'A',
            template: '<ul class="rating">' +
                '<li ng-repeat="star in stars" ng-class="star">' +
                '\u2605' +
                '</li>' +
                '</ul>',
            scope: {
                ratingValue: '=',
                max: '='
            },
            link: function (scope, elem, attrs) {
                console.log(scope.ratingValue);
                function buildStars(){
                  scope.stars = [];
                  for (var i = 0; i < scope.max; i++) {
                      scope.stars.push({
                          filled: i < scope.ratingValue
                      });
                  }
                }
                buildStars();
                scope.$watch('ratingValue',function(oldVal, newVal){
                  if(oldVal !== newVal){
                    buildStars();
                  }
                })
            }
        }
    });



<script src="hmc.starRating.js"></script>


**app.js**
var app = angular.module('app', ['ui.bootstrap', 'starRatings']);


**indix.html**
<div star-rating rating-value="7" max="8" ></div>


    .rating {
        color: #a9a9a9;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.rating {
        display: inline-block !important;
    }
    .rating li {
        list-style-type: none !important;
        display: inline-block !important;
        padding: 1px !important;
        text-align: center !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 13px !important;
        color: #ccc !important;
        font-size: 16px !important;
    }
    .rating .filled {
      color: #ff6131 !important;
      width: 13px !important;
    }

html

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" ></div>
        </span>

    </div>
</body>

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
        </span>
    </div>
</body>


{{rating.current}}超出
{{rating.max}}

脚本

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                    filled: i < scope.ratingValue
                });
            }
        }
    }
});

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.rating = 0;
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];

    $scope.getSelectedRating = function (rating) {
        console.log(rating);
    }
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '=',
            onRatingSelected: '&'
        },
        link: function (scope, elem, attrs) {

            var updateStars = function () {
                scope.stars = [];
                for (var i = 0; i < scope.max; i++) {
                    scope.stars.push({
                        filled: i < scope.ratingValue
                    });
                }
            };

            scope.toggle = function (index) {
                scope.ratingValue = index + 1;
                scope.onRatingSelected({
                    rating: index + 1
                });
            };

            scope.$watch('ratingValue', function (oldVal, newVal) {
                if (newVal) {
                    updateStars();
                }
            });
        }
    }
});

var starApp=angular.module（'starApp'，[]）；
控制器（'StarCtrl'，['$scope'，函数（$scope）{
$scope.ratings=[{
当前：5，
最多：10
}, {
当前：3，
最多：5
}];
}]);
starApp.directive（'starting'，function（）{
返回{
限制：“A”，
模板：''+
“”+
“\u2605”+
“”+
“”，
范围：{
额定值：'='，
最大值：'='
},
链接：功能（范围、要素、属性）{
scope.stars=[]；
对于（变量i=0；i



如果你想动态进行星级评定，试试这个
动态明星评级

angular.module('starRatings',[]).directive('starRating', function () {
        return {
            restrict: 'A',
            template: '<ul class="rating">' +
                '<li ng-repeat="star in stars" ng-class="star">' +
                '\u2605' +
                '</li>' +
                '</ul>',
            scope: {
                ratingValue: '=',
                max: '='
            },
            link: function (scope, elem, attrs) {
                console.log(scope.ratingValue);
                function buildStars(){
                  scope.stars = [];
                  for (var i = 0; i < scope.max; i++) {
                      scope.stars.push({
                          filled: i < scope.ratingValue
                      });
                  }
                }
                buildStars();
                scope.$watch('ratingValue',function(oldVal, newVal){
                  if(oldVal !== newVal){
                    buildStars();
                  }
                })
            }
        }
    });



<script src="hmc.starRating.js"></script>


**app.js**
var app = angular.module('app', ['ui.bootstrap', 'starRatings']);


**indix.html**
<div star-rating rating-value="7" max="8" ></div>


    .rating {
        color: #a9a9a9;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.rating {
        display: inline-block !important;
    }
    .rating li {
        list-style-type: none !important;
        display: inline-block !important;
        padding: 1px !important;
        text-align: center !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 13px !important;
        color: #ccc !important;
        font-size: 16px !important;
    }
    .rating .filled {
      color: #ff6131 !important;
      width: 13px !important;
    }

Html
<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" ></div>
        </span>

    </div>
</body>

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
        </span>
    </div>
</body>


{{rating.current}}超出
{{rating.max}}

脚本
var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                    filled: i < scope.ratingValue
                });
            }
        }
    }
});

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.rating = 0;
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];

    $scope.getSelectedRating = function (rating) {
        console.log(rating);
    }
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '=',
            onRatingSelected: '&'
        },
        link: function (scope, elem, attrs) {

            var updateStars = function () {
                scope.stars = [];
                for (var i = 0; i < scope.max; i++) {
                    scope.stars.push({
                        filled: i < scope.ratingValue
                    });
                }
            };

            scope.toggle = function (index) {
                scope.ratingValue = index + 1;
                scope.onRatingSelected({
                    rating: index + 1
                });
            };

            scope.$watch('ratingValue', function (oldVal, newVal) {
                if (newVal) {
                    updateStars();
                }
            });
        }
    }
});

var starApp=angular.module（'starApp'，[]）；
控制器（'StarCtrl'，['$scope'，函数（$scope）{
$scope.rating=0；
$scope.ratings=[{
当前：5，
最多：10
}, {
当前：3，
最多：5
}];
$scope.getSelectedRating=功能（评级）{
控制台日志（额定值）；
}
}]);
starApp.directive（'starting'，function（）{
返回{
限制：“A”，
模板：''+
“”+
“\u2605”+
“”+
“”，
范围：{
额定值：'='，
最大值：'='，
onRatingSelected:“&”
},
链接：功能（范围、要素、属性）{
var updateStars=函数（）{
scope.stars=[]；
对于（变量i=0；i

有一个精彩的教程来了解更多关于角星评级的解释
您甚至可以尝试使用角星用户界面。这是
只需要添加这个标签
<rating ng-model="rate" max="max" 
    readonly="isReadonly" 
    on-hover="hoveringOver(value)" 
    on-leave="overStar = null">




//控制器
var starApp=angular.module（'starApp'，[]）；
控制器（'StarCtrl'，['$scope'，函数（$scope）{
$scope.maxRating=10；
$scope.ratedBy=0；
$scope.rateBy=函数（星形）{
$scope.ratedBy=star；
}
}]);
.rating{
颜色：#A9A9；
保证金：0；
填充：0；
}
ul评级{
显示：内联块；
}
李先生{
列表样式类型：无；
显示：内联块；
填充：1px；
文本对齐：居中；
字体大小：粗体；
光标：指针；
}
.评级.填写{
颜色：蓝色；
}



★
★


hmc.starting.js
angular.module('starRatings',[]).directive('starRating', function () {
        return {
            restrict: 'A',
            template: '<ul class="rating">' +
                '<li ng-repeat="star in stars" ng-class="star">' +
                '\u2605' +
                '</li>' +
                '</ul>',
            scope: {
                ratingValue: '=',
                max: '='
            },
            link: function (scope, elem, attrs) {
                console.log(scope.ratingValue);
                function buildStars(){
                  scope.stars = [];
                  for (var i = 0; i < scope.max; i++) {
                      scope.stars.push({
                          filled: i < scope.ratingValue
                      });
                  }
                }
                buildStars();
                scope.$watch('ratingValue',function(oldVal, newVal){
                  if(oldVal !== newVal){
                    buildStars();
                  }
                })
            }
        }
    });



<script src="hmc.starRating.js"></script>


**app.js**
var app = angular.module('app', ['ui.bootstrap', 'starRatings']);


**indix.html**
<div star-rating rating-value="7" max="8" ></div>


    .rating {
        color: #a9a9a9;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.rating {
        display: inline-block !important;
    }
    .rating li {
        list-style-type: none !important;
        display: inline-block !important;
        padding: 1px !important;
        text-align: center !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 13px !important;
        color: #ccc !important;
        font-size: 16px !important;
    }
    .rating .filled {
      color: #ff6131 !important;
      width: 13px !important;
    }

angular.module（'starRatings'，[]）指令（'starRating'，函数（）{
返回{
限制：“A”，
模板：''+
“”+
“\u2605”+
“”+
“”，
范围：{
额定值：'='，
最大值：'='
},
链接：功能（范围、要素、属性）{
console.log（scope.ratingValue）；
函数buildStars（）{
scope.stars=[]；
对于（变量i=0；i