使用 angular Filter 根据导航选择在左侧过滤和显示内容

Question

这应该是一个简单的问题，目前正在导航左侧显示小部件类型，并且我有一个小部件数组。根据小部件标题选择，我需要从小部件中过滤类型并显示在右侧。

这是我现在拥有的代码，

App.js

 $scope.WidgetTypes = [
    {
       title: 'Chart',
      icon: 'styles/css/images/icons/ic_insert_chart_24px.svg'
    },
    {

      title: 'Blogging',
      icon: 'styles/css/images/icons/ic_assignment_24px.svg'
    },
    {

      title: 'Advertising',
      icon: 'styles/css/images/icons/ic_av_timer_24px.svg'
    },
    {

      title: 'Custom',
      icon: 'styles/css/images/icons/ic_dashboard_24px.svg'
    },
    {

      title: 'Social Media',
      icon: 'styles/css/images/icons/ic_now_widgets_24px.svg'
    } ,
     {

      title: 'Web Analytics',
      icon: 'styles/css/images/icons/ic_gradient_24px.svg'
    }  
  ];
      $scope.Widgets = [
    {
       title: 'Google SpreadSheets',
      icon: 'styles/css/images/icons/ic_insert_chart_24px.svg',
       type:"Chart",
       Description:'Line, Area, Bar, Pie, Table'
    } ,

    {

      title: 'LinkedIn',
      icon: 'styles/css/images/icons/ic_dashboard_24px.svg',
       type:"Social Media",
         Description:'Connections, Network Updates'
    }, 
    {

      title: 'Pinterest',
      icon: 'styles/css/images/icons/ic_dashboard_24px.svg',
       type:"Social Media",
         Description:'Boards, Pins, Likes, Followers, Following'
    },
    {

      title: 'Google Analytics (Real Time)',
      icon: 'styles/css/images/icons/ic_dashboard_24px.svg',
       type:"Web Analytics",
         Description:'Audience, Traffic, Content, Conversions'
    }
  ];

HTML:

 <md-list-item class="md-3-line" ng-repeat="widget in Widgets ">
   <div layout="row" layout-margin>
     <div flex="60">
        <img ng-src="{{widget.icon}}" class="md-avatar" alt="{{widget.title}}">
        <div class="md-list-item-text">
          <h4>{{ widget.title }}</h4>
          <h5>{{ widget.Description }}</h5>
        </div>
      </div>
     <div flex="20">
       <md-button style="width:100px"    class="md-raised">
        Add
       </md-button>
      </div>
    </div>
   <md-divider></md-divider>
 </md-list-item>

这是Plunker

Answer 1

你已经在正确的方向上你只需要实施选择和过滤器

$scope.filterWidgets = function(item)
 {
   $scope.selected = {};
  $scope.selected.type = item.title; 
  console.log(selected);
 };

和

<md-list-item class="md-3-line" ng-repeat="widget in Widgets | filter : selected">

http://plnkr.co/edit/8M8tNAmV1dARIu4OfFcl?p=preview

使用 angular Filter 根据导航选择在左侧过滤和显示内容

Filter and display content on the left based on navigation selection using angular Filter

html

javascript

angularjs

angular-material