2015-04-27 80 views
1

我试图从一个角度控制器传递一个对象数组到一个自定义指令元素,并用ng-repeat迭代对象,但我没有获取数据。将数组从控制器传递给自定义指令?

$scope.mydata=[ 


    { 
     "_id":"1", 
     displayConfig:[ 
       { 
     "fieldIndex": 2, 
"propertyName": "o1", 
"propertyValue": "sree" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o2", 
"propertyValue": "sravs" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o3", 
"propertyValue": "sree" 
       }, 

      ], 
     "name": "Alabama", 
     "abbreviation": "AL" 


    }, 
    { 
     "_id":"2", 
     displayConfig:[ 
       { 
     "fieldIndex": 2, 
"propertyName": "o1", 
"propertyValue": "yui" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o2", 
"propertyValue": "juim" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o3", 
"propertyValue": "aww" 
       }, 

      ], 
     "name": "Alaska", 
     "abbreviation": "AK" 
    }, 
    { 
     "_id":"3", 
     displayConfig:[ 
       { 
     "fieldIndex": 2, 
"propertyName": "o1", 
"propertyValue": "fgt" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o2", 
"propertyValue": "ertyu" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o3", 
"propertyValue": "ghytt" 
       }, 

      ], 

     "name": "bmerican Samoa", 
     "abbreviation": "AS" 
    }, 
    { 
     "_id":"4", 
     displayConfig:[ 
       { 
     "fieldIndex": 2, 
"propertyName": "o1", 
"propertyValue": "hjjhu" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o2", 
"propertyValue": "rdrer" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o3", 
"propertyValue": "xds" 
       }, 

      ], 
     "name": "drizona", 
     "abbreviation": "AZ" 
    }, 
    { 
     "_id":"5", 
     displayConfig:[ 
       { 
     "fieldIndex": 2, 
"propertyName": "o1", 
"propertyValue": "errrr" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o2", 
"propertyValue": "ddd" 
       },{ 
     "fieldIndex": 2, 
"propertyName": "o3", 
"propertyValue": "nnnn" 
       }, 

      ], 
     "name": "crkansas", 
     "abbreviation": "AR" 
    } 

]; 

HTML文件...........

<search items="mydata" prompt="Start typing a US state" title="mydata.displayConfig[0].propertyName" subtitle="abbreviation" id="_id" model="_id" on-selectupdate="onItemSelected()" /> 

directive.js

.directive('search', function($timeout) { 
    return { 
    restrict: 'AEC', 
    scope: { 
     items: '=', 
     prompt:'@', 
     title: '@', 
     subtitle:'@', 
     model: '=', 
     onSelectupdate:'&' 
    }, 
    link:function(scope,elem,attrs){ 
     scope.handleSelection=function(selectedItem){ 
     scope.model=selectedItem; 
      console.warn(scope.items); 
     scope.current=0; 
     scope.selected=true;   
     $timeout(function(){ 
      scope.onSelectupdate(); 
      },200); 
     }; 
     scope.current=0; 
     scope.selected=true; 
     scope.isCurrent=function(index){ 
     return scope.current==index; 
     }; 
     scope.setCurrent=function(index){ 
     scope.current=index; 
     }; 
    }, 
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html' } 
}) 

genericsearch.html

<div class="multitext-wrap blue-border"> 
<input type="text" ng-model="model" ng-keydown="selected=false"/><br/> 
<div class="items" ng-hide="!model.length || selected"> 
    <div class="item" ng-repeat="item in items" ng-click="handleSelection(item[title])" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)"> 
     <p class=" tag-label">{{item[title]}}</p><span class="tag-cross pointer" ng-click="removeOrg($index);">x</span> 

    </div> 
</div> 
</div> 

请帮忙解决这个问题。 由于事先

+0

任何控制台错误? –

+0

你是如何传递'title'是错误的,你不能使用多级字符串值 –

+0

你想创建一个通用的搜索指令访问属性值... http://jsfiddle.net/arunpjohny/ mgm7cta8/2/- 如果您在文本框中键入内容,则可以看到一些“X”标记 –

回答

1

您可以通过访问ATTRS它在你的链接功能:

function(scope,elem,attrs) 
{ 
var mydata = attrs.model; 
} 

但什么感觉错了你的方式做到这一点。我认为这里更聪明,也更容易使用服务或工厂。

Example of service/factory utilisation

链接功能

1

尝试观看您的参数ATTRS参数结合这一点。可能你在尝试使用之前,你会得到它。

.directive('search', function($timeout) { 
    return { 
    restrict: 'AEC', 
    scope: { 
     items: '=', 
     prompt:'@', 
     title: '@', 
     subtitle:'@', 
     model: '=', 
     onSelectupdate:'&' 
    }, 
    link:function(scope,elem,attrs){ 
     scope.handleSelection=function(selectedItem){ 
     scope.model=selectedItem; 
      console.warn(scope.items); 
     scope.current=0; 
     scope.selected=true;   
     $timeout(function(){ 
      scope.onSelectupdate(); 
      },200); 
     }; 

     scope.$watch("items", function(newData) { 
      console.log("Items: ", newData); 
     }); 


     scope.current=0; 
     scope.selected=true; 
     scope.isCurrent=function(index){ 
     return scope.current==index; 
     }; 
     scope.setCurrent=function(index){ 
     scope.current=index; 
     }; 
    }, 
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html' } 
}) 
+0

我如何使它选择多个项目? – harrini

+0

你是什么意思? “scope.items”是一个未选定的项目,它是一个列表(对象),你在当前的指令中从你的主视图/控制器中得到了什么。 – Lugaru

+0

我可以选择只有一个项目,但我需要选择多个项目我该如何做这个http://plnkr.co/edit/YhDv7oNMR1ZrheSHalIQ?p=preview – harrini

相关问题