Santhucool Santhucool - 5 months ago 8
jQuery Question

angularjs onclick need to fetch value corresponding to particular clicked value from another data set and display on div

I am new to angularjs and my js file as follows:

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);

}

});


First I am populating the productnames in a listview as follows:

<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


There you can see a function
ng-click="setMaster(ProdMenu)"
.

I have another
div category
. I want to display categories corresponding to that particular products to be displayed in div category.

In the following function:

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

}


.
I am getting the clicked productname.

Suppose I am clicked CBS from list then I should get CBS1, CBS2 in category div

How can I do this? please guide me?

Answer

You can use ng-repeat and filter. Here is a 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;

    }

});
Comments