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


Posted in Javascript onNovember 09, 2017

本文介绍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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JavaScript File分段上传
Mar 10 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 #Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 #Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 #Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php之可变变量的实例详解
2017/09/12 PHP
Javascript 实用小技巧
2010/04/07 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
React组件refs的使用详解
2018/02/09 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python中random模块用法实例分析
2015/05/19 Python
用Eclipse写python程序
2018/02/10 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
大学军训通讯稿
2014/01/13 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
标准版离职证明书
2014/09/12 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python