Как я могу искать имя по отображению данных массива по кнопке или по ссылке href angular 1.6.X

Я хочу сделать динамический код сильным текстом

// 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>

ребята, я сталкиваюсь с некоторой проблемой в угловых JS. Я хочу отобразить список категорий с левой стороны и отобразить название продукта на правой боковой панели, когда вы щелкнете по cat1, отобразить все имена категорий, включающие категории. В качестве примера, когда вы щелкаете по cat1, отображаемое имя времени как "pro1" и "pro3" для контрольная проверка изображения возможна ли в angular.ja 1.6.x? введите описание изображения здесь

var shop = {
        categories: [
          'cat1','cat2','cat3'
        ],
        products: [
          {
            name: 'pro1',
            categories: ['cat1']
          },
          {
            name: 'pro2',
            categories: ['cat2']
          },
          {
            name: 'pro3',
            categories: ['cat1','cat3']
          }
        ]
      };
Источник

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>

Источник
Другие вопросы по тегам