Question

我是angularjs和我的js文件的新手，如下所示：

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    $scope.ProdMenu = [
          {ProductMenuName: "CBS"},
          {ProductMenuName: "PQR"},
          {ProductMenuName: "ABC"}
        ];

        $scope.categories = [
          {categoryName: "CBS1", ProductMenuName: "CBS"},
          {categoryName: "CBS2", ProductMenuName: "CBS"},
          {categoryName: "ABC1",ProductMenuName: "ABC"},
          {categoryName: "ABC2",ProductMenuName: "CBS"},
          {categoryName: "PQR1", ProductMenuName: "PQR"},
          {categoryName: "PQR2", ProductMenuName: "PQR"},
        ];


         $scope.setMaster = function(section) {
            console.log(section.ProductMenuName);

        }

});

首先，我按照以下方式在listview中填充产品名称：

    <body ng-app="mainModule">
  <div ng-controller="mainController">
    <ul class="dropdown-menu dropdown-menu-left " role="menu">
      <li ng-repeat="ProdMenu in ProdMenu">
        <a href="" ng-click="setMaster(ProdMenu)">{{ProdMenu.ProductMenuName}}</a>
      </li>
    </ul>
  </div>
<div id="category">
 <ul><li></li></ul>
</div

在那里你可以看到一个函数ng-click="setMaster(ProdMenu)"。

我有另一个div category。我想显示与要在div类别中显示的特定产品相对应的类别。

在以下功能中：

$scope.setMaster = function(section) {
            console.log(section.ProductMenuName);

        }

。我收到了点击的产品名称。

假设我从列表中点击了CBS然后我应该在类别div中获得CBS1，CBS2

我该怎么做？请指导我？

Answer 1

Here我做了一个你需要的Plunker。我使用Angular's filter来做这件事。

它会显示$scope.ProdMenu列表，当您点击ProdMenu时，会显示$scope.categories的相关类别。

<强> HTML

<div ng-controller="mainController">
    <ul role="menu">
        <li ng-repeat="p in ProdMenu">
            <a ng-click="setMaster(p)">{{p.ProductMenuName}}</a>
        </li>
    </ul>

    <div id="category">
        <ul>
            <li ng-repeat="c in categories | filter: current.ProductMenuName: c.ProductMenuName">
                {{c.categoryName}}
            </li>
        </ul>
    </div>
</div>

<强> AngularJS

angular.module('mainModule', []).controller('mainController',['$scope', '$timeout', function($scope, $timeout) {
        $scope.ProdMenu = [
          {ProductMenuName: "CBS"},
          {ProductMenuName: "PQR"},
          {ProductMenuName: "ABC"}
        ];

        $scope.current = undefined;

        $scope.categories = [
          {categoryName: "CBS1", ProductMenuName: "CBS"},
          {categoryName: "CBS2", ProductMenuName: "CBS"},
          {categoryName: "ABC1",ProductMenuName: "ABC"},
          {categoryName: "ABC2",ProductMenuName: "CBS"},
          {categoryName: "PQR1", ProductMenuName: "PQR"},
          {categoryName: "PQR2", ProductMenuName: "PQR"},
        ];


        $scope.setMaster = function(section) {
          $scope.current = section;
        }
  }]);

Answer 2

您可以使用ng-repeat和过滤器。这是working plunker based on your code and data.

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <ul class="dropdown-menu dropdown-menu-left " role="menu">
    <li ng-repeat="ProdMenu in ProdMenu">
      <a href="" ng-click="setMaster(ProdMenu)">{{ProdMenu.ProductMenuName}}</a>
    </li>
  </ul>
  <div id="category" ng-repeat="category in categories | filter: {ProductMenuName:master} ">
    <ul>
      <li>{{category.categoryName}}</li>
    </ul>
  </div>
</body>

</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.master = 'undefined';

  $scope.ProdMenu = [
      {ProductMenuName: "CBS"},
      {ProductMenuName: "PQR"},
      {ProductMenuName: "ABC"}
    ];

    $scope.categories = [
      {categoryName: "CBS1", ProductMenuName: "CBS"},
      {categoryName: "CBS2", ProductMenuName: "CBS"},
      {categoryName: "ABC1",ProductMenuName: "ABC"},
      {categoryName: "ABC2",ProductMenuName: "CBS"},
      {categoryName: "PQR1", ProductMenuName: "PQR"},
      {categoryName: "PQR2", ProductMenuName: "PQR"},
    ];


     $scope.setMaster = function(section) {
        console.log(section.ProductMenuName);
        $scope.master = section.ProductMenuName;

    }

});

Answer 3

试试这个：

$scope.currentCategories = [];

$scope.setMaster = function(section) {
    $scope.currentCategories = $scope.categories.filter(function(c) {
        return c.categoryName === section.ProductMenuName;
    });
};

在你的HTML中：

<ul>
    <li ng-repeat="category in currentCategories">{{category.categoryName}}</li>
</ul>

Answer 4

您可以在setMaster（）函数中设置$ scope变量来过滤类别。

<强>控制器

$scope.setMaster = function(section) {
  $scope.selected = section.ProductMenuName;
};

<强> HTML

  <li ng-repeat="category in categories | filter: {ProductMenuName: selected}">
    {{ category.categoryName }}
  </li>

这是一个有效的plunk整个解决方案。

angularjs onclick需要从另一个数据集中获取与特定点击值相对应的值并显示在div上

4 个答案: