Angular ng-repeat错误“不允许在转发器中重复”和(k,v)在formElementsData轨道中由$ index不起作用

时间:2015-03-06 22:41:17

标签: javascript angularjs

嗨大家我有这个错误,当我使用转发器BTW这适用于我创建的另一个应用程序,它没有重复我使用@license AngularJS v1.3.8现在时间我正在使用@license AngularJS v1.3.14

  

错误:[ngRepeat:dupes]不允许在转发器中重复。使用   '跟踪'表达式以指定唯一键。中继器:val in   sourceData.Value,Duplicate key:string:o,Duplicate value:o

这是我的数据集我说它正在重复

<div ng-inti="formElementsData=[
     {' $id':'1','formquestionid':1,'sortvalue':'1','question':'','label':'radio','input':'radio','inputtype':null,'name':'radio1','class':'form-control','placeholder':null,'value':'chose one, uno,dos,tres,cuatro','option':'null','group':'personal-info','datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'2','formquestionid':2,'sortvalue':'1','question':'','label':'checkbox','input':'checkbox','inputtype':null,'name':null,'class':'form-control','placeholder':null,'value':'uno,dos,tres,cuatro','option':null,'group':'form-control','datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'3','formquestionid':3,'sortvalue':'1','question':'','label':'states','input':'state','inputtype':null,'name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'4','formquestionid':4,'sortvalue':'1','question':'','label':'address','input':'address','inputtype':null,'name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':'checking tool tip on focus event','tooltipplacement':'right','listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'5','formquestionid':5,'sortvalue':'1','question':'','label':'contry','input':'country','inputtype':null,'name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'6','formquestionid':6,'sortvalue':'1','question':'','label':'email','input':'text','inputtype':'text','name':null,'class':'form-control','placeholder':'example@testmail.com','value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'text','createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'7','formquestionid':7,'sortvalue':'1','question':'','label':'being considered by','input':'textarea','inputtype':null,'name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'8','formquestionid':8,'sortvalue':'1','question':'','label':'password','input':'text','inputtype':'password','name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'password','createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'9','formquestionid':9,'sortvalue':'1','question':'','label':'primary markets','input':'text','inputtype':'textarea','name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':null,'createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'10','formquestionid':10,'sortvalue':'1','question':'','label':'physicianbenefitsgroup','input':'text','inputtype':'datetime','name':null,'class':'form-control','placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'datetime','createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'11','formquestionid':11,'sortvalue':'1','question':'','label':'test date','input':'text','inputtype':'date','name':null,'class':null,'placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'date','createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'12','formquestionid':12,'sortvalue':'1','question':'','label':'text color','input':'text','inputtype':'color','name':null,'class':null,'placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'color','createdby':null,'created':null,'updated':null,'updatedby':null},
     {'$id':'13','formquestionid':13,'sortvalue':'1','question':'','label':'test number','input':'text','inputtype':'number','name':null,'class':null,'placeholder':null,'value':null,'option':null,'group':null,'datasourceurl':null,'tooltip':null,'tooltipplacement':null,'listorientation':null,'id':'number','createdby':null,'created':null,'updated':null,'updatedby':null}]">
</div>

这是我的HTML

<div class="page page-table">
<div ng-controller="formCreatorController">
    <form class="form-horizontal" role="form">
        <div ng-repeat="(k, v) in formElementsData track by $index">
            <div xv-form-creator source-data="v">
            </div>
        </div>
    </form>
</div>

这是指令

'use strict';

app = angular.module('app.formCreator.directives', [])

app.directive('xvFormCreator', [ ->
return {
    restrict: 'EA',

    scope: sourceData: '='  

    controller: ($scope, $http) ->

      # spliting values & options for controls with this feature
      if $scope.sourceData.Option is not null
          $scope.sourceData.Option = $scope.sourceData.Option.split(',')

      if $scope.sourceData.Value  is not null
          $scope.sourceData.Value = $scope.sourceData.Value.split(',')

        $scope.getLocation = (val) ->
             $http.get('http://maps.googleapis.com/maps/api/geocode/json', params:
              address: val
              sensor: false).then (response) ->
              response.data.results.map (item) ->
                item.formatted_address

        $scope.statesWithFlags =  statesWithFlags
        $scope.contries = contries
        $scope.states = states
        $scope.selected = undefined;      

    template:swicthTemplateFormCreator,

    link: (scope, element) ->
      updateTextAreaHeight = ->
        textareaScrollHeight = element.find('.form-control')[0].scrollHeight
        textAreaCurrentHeight = element.find('.form-control').height()
        if textareaScrollHeight > textAreaCurrentHeight
            element.find('.form-control').css 'height', textareaScrollHeight + 2 + 'px'           
            element.on 'keyup', updateTextAreaHeight()          
            element.on 'focusout', updateTextAreaHeight()                
}
])

模板字符串

<div ng-switch on="sourceData.Input" class="form-group">  
<div class="col-md-6">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <!--LABEL-->
                <label class="text-primary">{{ sourceData.Label  }} </label>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <!--QUESTION-->
                <label class="text-default">{{ sourceData.Question  }} </label>
            </div>
        </div>
</div>     
<!---SWITCH START ON QUESTION INPUT -->
<div class="col-md-6">

    <!--TEXT supported text input types : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.-->
    <div ng-switch-when="text">         
        <input type="{{sourceData.InputType}}"
               class="form-control"
               name="{{ sourceData.Question }} "
               placeholder="{{sourceData.Placeholder}}"
               value="{{ sourceData.Value }}"
               tooltip="On the Right!"
               tooltip-placement="right" />                
    </div> 

    <!--ADDRESS-->
    <div ng-switch-when="address">
        <input type="text"
               ng-model="asyncSelected"
               placeholder="Locations loaded via $http"
               typeahead="address for address in getLocation($viewValue)"
               typeahead-loading="loadingLocations"
               class="form-control"
               tooltip="{{sourceData.tooltip}}"
               tooltip-trigger="focus"
               tooltip-placement="{{sourceData.TooltipPlacement}}" />
              <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>  
    </div>

    <!--STATE-->
    <div ng-switch-when="state">               
           <!-----Html      <script type="text/ng-template" id="customTemplate.html">
                    <a>
                        <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
                        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                    </a>
                </script> Template with the image source-->
        <input type="text" 
               ng-model="selected" 
               placeholder="state"  
               typeahead="state for state in states | filter:$viewValue | limitTo:8" 
               class="form-control">
    </div>

    <!--COUNTRY-->
    <div ng-switch-when="country">
        <input type="text" 
               ng-model="Country" 
               placeholder="country" 
               typeahead="country for country in  countries | filter:$viewValue | limitTo:8" 
               class="form-control">                      
    </div>
        <!--TEXT AREA-->
        <div ng-switch-when="textarea">
            <textarea class="form-control" 
                      name="{{ sourceData.Question }} " 
                      placeholder="{{ sourceData.Placeholder }}" 
                      value="{{ sourceData.Value }}"></textarea>
        </div>

        <!--SELECT LIST-->
        <div ng-switch-when="select">
            <select name="{{ sourceData.Question}} " class="form-control">
                <option ng-repeat=" opt in sourceData.option" value="{{opt}}">{{opt}}</option>
            </select>
        </div>

        <!--RADIO LIST-->
        <div ng-switch-when="radio">
            <div ng-repeat=" val in sourceData.Value" class="radio-inline">
                <label>
                    <input type="radio"
                           name="{{ sourceData.Question }} " 
                           value="{{val}}" />
                    {{val}}
                </label>
            </div>
        </div>

        <!--CHEKBOX LIST-->
        <div ng-switch-when="checkbox">
            <div ng-repeat=" val in sourceData.Value" class="checkbox-inline">
                <label>
                    <input type="checkbox" 
                           name="{{ sourceData.Question }} " 
                           value="{{val}}" />
                    {{val}}
                </label>
            </div>
        </div>

        <!--DEFAULT ERROR  CONTROL WITH NO TYPE-->
        <div ng-switch-default>
            <label class="label label-danger form-control">The question <span class="label label-info"> "  
                {{sourceData.Question }}" </span><br/>  has not input type such as (input type: text, texarea..etc)</label>
        </div>

    </div>

这就是它看起来甚至认为我得到了错误 enter image description here

1 个答案:

答案 0 :(得分:1)

好的我终于明白了,事实证明,咖啡脚本编译器使用de条件编译表达式&#34;不是&#34;将java脚本转换为(object.toCompare ===!null)并在更正代码更改后抛出有关重复项的错误&#34; ===!空&#34; for&#34;!==&#34;一切正常:)

   if ($scope.sourceData.Option === !null) {
        $scope.sourceData.Option = $scope.sourceData.Option.split(',');
      }
      if ($scope.sourceData.Value === !null) {
        $scope.sourceData.Value = $scope.sourceData.Value.split(',');
      }

  if ($scope.sourceData.Option !== null) {
        $scope.sourceData.Option = $scope.sourceData.Option.split(',');
      }

      if ($scope.sourceData.Value !== null) {
        $scope.sourceData.Value = $scope.sourceData.Value.split(',');
      }