Question

我正在尝试扩展我问过的question的示例/答案（由@sylwester给出）。现在我必须做这样的事情

enter image description here

到目前为止我做了什么？

app.js

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

app.controller('MainCtrl', function($scope) {

  var arr1 = [
              {"EmpId":1,"EmpName":"Michale Sharma","gender":"Male","age":25,"salary":10000},
              {"EmpId":2,"EmpName":"Sunil Das","gender":"Male","age":24,"salary":5000},
              {"EmpId":3,"EmpName":"Robin Pandey","gender":"Male","age":35,"salary":45000},
              {"EmpId":4,"EmpName":"Mona Singh","gender":"Female","age":27,"salary":12000}

             ];
   var arr2 = [
                {"Deptid":4,"Deptname":"IT"},
                {"Deptid":1,"Deptname":"HR"},
                {"Deptid":3,"Deptname":"HW"},
                {"Deptid":2,"Deptname":"HW4"}
              ];

  var res = merge(arr1, arr2, "EmpId", "Deptid");

  $scope.Employee = {
    EmployeeName:res.EmpName,
    EmployeeSex:res.gender
  };

  $scope.Department = {
    DepartmentName:res.Deptname
  };

  //console.log(res);   

}).
directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customer: '='

      },
      templateUrl: 'my-customer-plus-vojta.html'
    };

  });

  function merge(arr1, arr2, prop1, prop2) 
    {
        //alert("in merge");
        return arr1.map(function(item){
            var p = item[prop1];
            var el = arr2.filter(function(item) {
                return item[prop2] === p;
            });
            if (el.length === 0) {
                return null;
            }
            var res = {};
            for (var i in item) {
                if (i !== prop1) {
                    res[i] = item[i];
                }
            }
            for (var i1 in el[0]) {
                if (i1 !== prop2) {
                    res[i1] = el[0][i1];
                }
            }
            return res;
        }).filter(function(el){return el !== null;});
    }

的index.html

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

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

  <body ng-controller="MainCtrl">       

    <table border="1">

      <tr>

        <td>EmployeeNames</td>
        <td>Gender</td>
        <td>Works For</td>

      </tr>
      <tr>
        <my-customer customer="Employee"></my-customer>
        <my-customer customer="Department "></my-customer>

      </tr>

    </table>


  </body>

</html>

my-customer-plus-vojta.html （我在这里考虑其他事情是正确的。我同样知道li不是正确的使用方法。但是，我不知道该怎么做做和怎么做）

<h3>Employee-Department</h3>
<li ng-repeat="emp in customer.Employee">
<p ng-if="emp.EmployeeName">{{emp.EmployeeName}}</p>
<p ng-if="emp.EmployeeSex">{{emp.EmployeeSex}}</p>
</li>

<li ng-repeat="dept in customer.Department">
<p ng-if="dept.DepartmentName">{{dept.DepartmentName}}</p>
</li>

请帮忙。

Answer 1

问题是您无法链接到res.EmpName ... 您的res变量是一个对象数组。您需要循环遍历该Array，然后查看该Object内部以获取所需内容。然后，您可以将其作为$ scope键/值的一部分提供。

例如res对象的第一个键：

Deptname: "HR"
EmpName: "Michale Sharma"
age: 25
gender: "Male"
salary: 10000

为您需要制作的新集合创建空数组，然后遍历res对象并将其添加到其中。

var empNames = [],
    empGenders = [],
    empDepts = [];

for (key in res) {
    empNames.push(res[key].EmpName);
    empGenders.push(res[key].gender);
    empDepts.push(res[key].Deptname);
}

// NOW you can apply them into your scope

$scope.Employee = {
    EmployeeName : empNames,
    EmployeeSex : empGenders
};

$scope.Department = {
    DepartmentName : empDepts
};

Answer 2

请参阅下面的演示

＆＃13;

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

  var arr1 = [{
      "EmpId": 1,
      "EmpName": "Michale Sharma",
      "gender": "Male",
      "age": 25,
      "salary": 10000
    }, {
      "EmpId": 2,
      "EmpName": "Sunil Das",
      "gender": "Male",
      "age": 24,
      "salary": 5000
    }, {
      "EmpId": 3,
      "EmpName": "Robin Pandey",
      "gender": "Male",
      "age": 35,
      "salary": 45000
    }, {
      "EmpId": 4,
      "EmpName": "Mona Singh",
      "gender": "Female",
      "age": 27,
      "salary": 12000
    }

  ];
  var arr2 = [{
    "Deptid": 4,
    "Deptname": "IT"
  }, {
    "Deptid": 1,
    "Deptname": "HR"
  }, {
    "Deptid": 3,
    "Deptname": "HW"
  }, {
    "Deptid": 2,
    "Deptname": "HW4"
  }];

  $scope.res = merge(arr1, arr2, "EmpId", "Deptid");
});
app.directive('myCustomer', function() {
  return {
    restrict: 'AE',
    scope: {
      customer: '=myCustomer'

    },
    replace: true,
    templateUrl: 'customerTmpl.html',
    link: function(scope) {
      console.log(scope)
    }
  };
});

function merge(arr1, arr2, prop1, prop2) {
  //alert("in merge");
  return arr1.map(function(item) {
    var p = item[prop1];
    var el = arr2.filter(function(item) {
      return item[prop2] === p;
    });
    if (el.length === 0) {
      return null;
    }
    var res = {};
    for (var i in item) {
      if (i !== prop1) {
        res[i] = item[i];
      }
    }
    for (var i1 in el[0]) {
      if (i1 !== prop2) {
        res[i1] = el[0][i1];
      }
    }
    return res;
  }).filter(function(el) {
    return el !== null;
  });
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="MainCtrl">

  <table class="table table-striped">
    <tbody>
      <tr ng-repeat="customer in res" my-customer="customer"></tr>
    </tbody>
  </table>


  <script type="text/ng-template" id="customerTmpl.html">
    <tr>
      <td>{{customer.EmpName}}</td>
      <td>{{customer.gender}}</td>
      <td>{{customer.age}}</td>
      <td>{{customer.salary}}</td>
      <td>{{customer.Deptname}}</td>
    </tr>
  </script>
</body>

＆＃13;

在角度孤立范围概念工作中面临的问题

2 个答案: