我如何通过按钮或 href link angular 1.6.X 按数组数据显示搜索名称

Question

我想制作动态代码 强文本

// angular.bootstrap(document.getElementById('app'), ['app']);

var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
      {
        "Name": "pro1",
        "categories": [
            'cat1'
        ]
      },
      {
        "Name": "pro2",
        "categories": [
            'cat2'
        ]
      },
      {
        "Name": "pro3",
        "categories": [
            'cat3','cat1' 
        ]
      }
    ];
    $scope.Name =$scope.adults[0].Name;
    $scope.updateList = function(x) {
     $scope.childrens=$scope.adults[x].Name;
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
  <div ui-view></div>
</div> -->
<div id="library">
  <h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">

<!-- <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->

<body>

    <div ng-controller="AppCtrl" >
        <ul>
            <li class="list-group-item" ><a ng-click="updateList(0)">cat1</a>
            </li>
            <li class="list-group-item" ng-click="updateList(1)"><a ng-click="updateList(1)">cat2</a>
            </li>
            <li class="list-group-item" ng-click="updateList(2)"><a ng-click="updateList(2)">cat3</a>
            </li>
        </ul>
       
        <div class="col-md-6"><h2>product</h2><br>
        <ul>
            <li class="list-group-item" ng-repeat="a in adults">
                {{a.Name}}
            </li>
        </ul>
        </div>
    </div>
</body>

</html>

伙计们，我在 angular js 中遇到了一些问题。当您单击 cat1 时，我想在左侧显示类别列表并在右侧面板显示产品名称显示所有包括类别产品 name.as 例如当您单击 cat1 时显示名称为 "pro1" 和"pro3" 供参考检查图像 angular.ja 1.6.x 有可能吗？ enter image description here

var shop = {
        categories: [
          'cat1','cat2','cat3'
        ],
        products: [
          {
            name: 'pro1',
            categories: ['cat1']
          },
          {
            name: 'pro2',
            categories: ['cat2']
          },
          {
            name: 'pro3',
            categories: ['cat1','cat3']
          }
        ]
      };

Answer 1

检查下面的代码：

// angular.bootstrap(document.getElementById('app'), ['app']);

var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
      {
        "Name": "pro1",
        "categories": [
            'cat1'
        ]
      },
      {
        "Name": "pro2",
        "categories": [
            'cat2'
        ]
      },
      {
        "Name": "pro3",
        "categories": [
            'cat3','cat1' 
        ]
      }
    ];
    $scope.Name =$scope.adults[0].Name;
    $scope.updateList = function(cat) {
     $scope.childrens = $scope.adults.filter(function(adult){
         return adult.categories.includes(cat);
     });
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
  <div ui-view></div>
</div> -->
<div id="library">
  <h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">

<!-- <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->

<body>

    <div ng-controller="AppCtrl" >
        <ul>
            <li class="list-group-item" ><a ng-click="updateList('cat1')">cat1</a>
            </li>
            <li class="list-group-item"><a ng-click="updateList('cat2')">cat2</a>
            </li>
            <li class="list-group-item"><a ng-click="updateList('cat3')">cat3</a>
            </li>
        </ul>
       
        <div class="col-md-6"><h2>product</h2><br>
        <ul>
            <li class="list-group-item" ng-repeat="a in childrens">
                {{a.Name}}
            </li>
        </ul>
        </div>
    </div>
</body>

</html>

我如何通过按钮或 href link angular 1.6.X 按数组数据显示搜索名称

how can i search name by array data display by button or href link angular 1.6.X

javascript

arrays

json

angularjs-1.6