Angularjs将多个参数传递给指令ng-repeat

发布时间：2020-12-17 09:04:00 所属栏目：安全来源：网络整理

导读：我怀疑我有html：这里有两种类型的数据：post和person.每个帖子的json都有一系列的人.我希望从指令到控制器检索等级Value,dataCategory和id(mydata.id/childData.id)： div ng-repeat="mydata in data" class="ng-scope ng-binding" p class="ng-binding"{{

我怀疑我有html：
这里有两种类型的数据：post和person.每个帖子的json都有一系列的人.我希望从指令到控制器检索等级Value,dataCategory和id(mydata.id/childData.id)：

<div ng-repeat="mydata in data" class="ng-scope ng-binding">

   <p class="ng-binding">{{mydata.postdata}}</p> 
   <div star-rating rating-value="rating" data-cat="post" data-id="{{mydata.id}}" ></div>

   <div ng-repeat="childData in mydata.personRelatedData">
          {{childData.personName}}  
          <div star-rating rating-value="rating" data-cat="person" data-id="{{childData .id}}" >
   </div>
</div>

我有一个指令：

myDirectives.directive('starRating',function () {
    return {
      restrict: 'A',template: '<div> <ul style="margin : 0px">' +
                  '<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index readonly="false">' +                   
                  '</li>' +
                '</ul></div>',scope: {
        ratingValue: '=',dataCat: '=',dataId: '=',readonly: '@',onRatingSelected: '&'       
      },link: function (scope,elem,attrs) {       
      scope.myNumber = 5;       
      scope.getNumber = function(num) {
                   return new Array(num);   
        }       

        scope.toggle= function(val) {
               console.log("Val : "+val);
               console.log("dataCat : "+scope.dataCat);
               console.log("dataId : "+scope.dataId);
               ...
        }

我应该在函数切换($index)中添加什么,以传递类别名称及其ID？
目前它显示：

Val : 1 
dataCat : undefined 
dataId : undefined

我是角度js的新手,可以感觉到在这里做错了…比如如何将范围值传递给切换功能？任何帮助都会很棒..
谢谢

试试这个：

HTML

<div star-rating dt-cat="post" dt-id="mydata.id" ></div>

在dt-id中你不应该使用“{{mydata.id}}”,只需使用“mydata.id”.

JavaScript的：

myDirectives.directive('starRating',function() {
  return {
    restrict: 'A',template: '<div ng-click="toggle()">Test</div>',scope: {
      dtCat: '@',dtId: '='
    },link: function(scope,attrs) {
      scope.toggle = function() {
        console.log("dtCat: " + scope.dtCat);
        console.log("dtId : " + scope.dtId);
      };
    }
  };
});

我测试它,我有：

dataCat: post
dataId : 5

我假设dtCat是字符串所以你应该使用dtCat：’@’.

我将数据更改为dt-因为角度条数据来自元素/属性的前面.

Angular规范化元素的标记和属性名称,以确定哪些元素与哪些指令匹配. (……)

规范化过程如下：
1.从元素/属性的前面剥离x-和数据.
2.将：,– 或_分隔的名称转换为camelCase.

更多：Creating Custom Directives (section Matching Directives)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!