指令的星级评分系统示例,js中下拉框实现渲染html的方法

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom
元素,但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下拉框。

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

前言

1、问题背景

service.html

大家都知道angualrjs处于安全的考虑,插值
指令会对相应字符串进行过滤,避免出现html攻击。但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框

select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建

 <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>

代码如下:

2、实现源码

directives.js

<body ng-app="app" ng-controller="controller">
<select ng-model="value" ng-options="t.text for t in testList"></select>
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope",function ($scope) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  $scope.value=20;
  $scope.testList=testList;
 }]);
</script>
</body>
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框(方式二)</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("secondApp",[]); 
app.controller("secondCon",function($scope){ 
$scope.trees = ["松树","樟树","枫树","枣树","桃树"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="secondApp" ng-controller="secondCon"> 
<select style="width: 200px;"> 
<option ng-repeat="tree in trees">{{tree}}</option> 
</select> 
</div> 
</body> 
</html> 
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
    });
   }
  }
 }
});

可以看到,空格直接被渲染为`
。一个简单粗暴的解决办法是修改angularjs源代码,不再对html进行过滤,在angularjs源码中搜索
updateOptions`函数,直接对相应脚本进行替换,如下图:

3、问题说明

services.js

图片 1                 

ng-repeat指令可以重复数据

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

可以看到,空格已经被正确的渲染,这种方式虽然简单,但是修改将会影响到所有的下拉框控件,有可能会受到html攻击,一种比较中规中矩的办法是采用ng-bind-html来渲染html,这个时候下拉框绑定数据的方式也需要改变,相应代码如下:

图片 2

controller.js

<body ng-app="app" ng-controller="controller">
<select ng-module="value" >
 <option ng-repeat="data in testList" value="{{data.id}}" ng-selected="data.id==value" ng-bind-html="data.text">
 </option>
</select>
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope","$sce",function ($scope,$sce) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  for(var i=0;i<testList.length;i++)
  {
   testList[i].text=$sce.trustAsHtml( testList[i].text);
  }
  $scope.value='20';//注意,此处必须为字符串类型,否则无法获取选中的值
  $scope.testList=testList;

 }]);

</script>
</body>

以上所述是小编给大家介绍的AngularJS使用ng-repeat指令实现下拉框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});

这种方式非常消耗性能,对于数据量不大的下拉框,这种方式完全可以满足需要,但是如果数据量稍微大些,浏览器就会出现明显的卡顿现象,这个时候可以自己写一个指令来实现下拉框,代码如下:

您可能感兴趣的文章:

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • AngularJs ng-repeat
    嵌套如何获取外层$index
  • AngularJS
    获取ng-repeat动态生成的ng-model值实例详解
  • AngularJS入门(用ng-repeat指令实现循环输出
  • Angularjs的ng-repeat中去除重复数据的方法
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS基础 ng-repeat
    指令简单示例
  • Angularjs渲染的 using
    指令的星级评分系统示例
  • Angular
    ng-repeat遍历渲染完页面后执行其他操作详细介绍
  • Angular.js中下拉框实现渲染html的方法
  • Angular将填入表单的数据渲染到表格的方法
  • AngularJS监听ng-repeat渲染完成的两种方法

解决方法 1:

<body ng-app="app" ng-controller="controller">
<drop-down-list d-list="testList" value="id" text="text" d-select-value="value" ></drop-down-list>
{{value}}
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope","$window",function ($scope,$window) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  $scope.value=20;
  $scope.testList=testList;
 }]);
 app.directive("dropDownList",function () {
  return{
   restrict:'E',
   scope :{
    dList:'=',
    dSelectValue:'='
   } ,
   link:function(scope, element, attrs) {
    var d=document;
    var value=attrs["value"];//对应option的value
    var text=attrs["text"];
    var selectValue=scope.dSelectValue;
    element.on("change",function(){
     var selectedIndex=this.selectedIndex;
     scope.$apply(function(){
      scope.dSelectValue=selectedIndex;
     });
    })

    for(var i=0;i<scope.dList.length;i++)
    {
     var option=d.createElement("option");
     option.value=scope.dList[i][value];
     option.innerHTML=scope.dList[i][text];
     if(selectValue==option.value)
     {
      option.setAttribute("selected",true);
     }
     element.append(option);
    }
   },
   template:'<select></select>',
   replace:true

  };
 });

</script>
</body>

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>

您可能感兴趣的文章:

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • AngularJs ng-repeat
    嵌套如何获取外层$index
  • AngularJS
    获取ng-repeat动态生成的ng-model值实例详解
  • AngularJS入门(用ng-repeat指令实现循环输出
  • Angularjs的ng-repeat中去除重复数据的方法
  • AngularJS使用ng-repeat指令实现下拉框
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS基础 ng-repeat
    指令简单示例
  • Angularjs渲染的 using
    指令的星级评分系统示例
  • Angular
    ng-repeat遍历渲染完页面后执行其他操作详细介绍
  • Angular将填入表单的数据渲染到表格的方法
  • AngularJS监听ng-repeat渲染完成的两种方法

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

您可能感兴趣的文章:

  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • AngularJs ng-repeat
    嵌套如何获取外层$index
  • AngularJS
    获取ng-repeat动态生成的ng-model值实例详解
  • AngularJS入门(用ng-repeat指令实现循环输出
  • Angularjs的ng-repeat中去除重复数据的方法
  • AngularJS使用ng-repeat指令实现下拉框
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS基础 ng-repeat
    指令简单示例
  • Angular
    ng-repeat遍历渲染完页面后执行其他操作详细介绍
  • Angular.js中下拉框实现渲染html的方法
  • Angular将填入表单的数据渲染到表格的方法
  • AngularJS监听ng-repeat渲染完成的两种方法