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

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(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="[email protected]" 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']
          }
        ]
      };
Теги:
arrays
angularjs-1.6

1 ответ

0
Лучший ответ

Проверьте код ниже:

// 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="[email protected]" 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>
Поделиться
  • 0
    Огромное спасибо .!!
  • 0
    Любая идея о данных выглядит так? .var shop = {категории: ['cat1', 'cat2', 'cat3'], продукты: [{name: 'pro1', категории: ['cat1']}, {name: 'pro2', категории: [ 'cat2']}, {name: 'pro3', категории: ['cat1', 'cat3']}]};
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню