当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angularjs渲染的 using 指令的星级评分系统示例

Angularjs渲染的 using 指令的星级评分系统示例

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文介绍angularjs渲染的 using 指令的星级评分系统示例，分享给大家，具体如下：
我试图创建静态使用 angularjs/离子成效甚微的星级评分系统。但目前什么都不输出到屏幕上......我是我做错了吗？

service.html

 <ion-list>
  <ion-item ng-repeat="business in businesslist track by $index" class="item-icon-right">
   <h2>{{business.name}}</h2> {{business.distance}} miles
   <br>
   <div star-rating rating-value="{{business.rating}}" max="rating.max"></div>
   <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
 </ion-list>

directives.js

angular.module('starter.directives', [])

.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.rating
    });
   }
  }
 }
});

services.js

.service("businessdata", [function () {
  var businessdata = [
  {
    id: 1,
    serviceid: 1,
    name: 'world center garage',
    distance: 0.1,
    rating: 4
  }
];

  return {
    getallbusinesses: function () {
      return businessdata;
    },

    getselectedbusiness: function(serviceid) {
      var businesslist = [];
      serviceid = parseint(serviceid);
      for(i=0;i<businessdata.length;i++) {
        if(businessdata[i].serviceid === serviceid) {
          businesslist.push(businessdata[i]);
        }
      }
      return businesslist;
    }
  }
}])

controller.js

.controller('servicectrl', function($scope, servicesdata, businessdata, $stateparams) {
 $scope.service = servicesdata.getselectedservice($stateparams.service);
 $scope.businesslist = businessdata.getselectedbusiness($stateparams.service);
});

解决方法 1:

controller.js

.controller('servicectrl', function($scope, servicesdata, businessdata, $stateparams) {
 $scope.service = servicesdata.getselectedservice($stateparams.service);
 $scope.businesslist = businessdata.getselectedbusiness($stateparams.service);
 $scope.ratings = {
   current: 5,
   max: 10
   };

和也修改service.html

<div star-rating rating-value="rating.current" max="rating.max"></div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网