Question

好的，所以我对Angular很新，现在只玩了三天。在尝试根据＆＃34; select选项＆＃34;的值过滤我创建的表时，我遇到了一个问题。在另一个控制器。基本上我有一个执行REST调用的控制器来填充＆＃34;选择＆＃34;菜单动态。然后我有另一个控制器，它进行单独的REST调用来填充表。我想要做的是根据＆＃34;值＆＃34;过滤表格。来自＆＃34;选择＆＃34;选项。例如，如果我选择＆＃34;选项＆＃34;如果值为＆＃34; 2＆＃34;，则表格将过滤为仅显示带有＆＃34; ID＆＃34;的结果。＆＃34; 2＆＃34;。我可能会以完全错误的方式解决这个问题，但从我正在阅读的内容中我需要创建一个＆＃34;服务＆＃34;存储＆＃34;值＆＃34; ＆＃34;选项＆＃34;这样我就可以在填充表格的控制器中引用它。如果有人能提供一些关于如何做这件事的煽动，我会非常感激。请看下面的代码......

Angular Code

angular.module('restCalls',[])

 // Controller for Project REST Call
.controller('displayProj',function($scope, $http) {

    $http({type: "GET", url:"http://my_api_call/", headers: { "ACCEPT": "application/json;odata=verbose"}})
        .success(function(data) {
            $scope.results = data.d.results;
            $scope.projects = [];

            for(i=0; i < data.d.results.length; i++) {
                $scope.projects.push({name: data.d.results[i].Title , id: data.d.results[i].Id});
            };

            $scope.getSelectedOption = function(value) {
                console.log($scope.selectedProject.id); 
            };

        });
})

// Controller for ChargeCode REST Call
.controller('displayCC',function($scope, $http) {

    $http({type: "GET", url:"http://my_api_call/", headers: { "ACCEPT": "application/json;odata=verbose"}})
        .success(function(data) {

            $scope.results = data.d.results;
            $scope.projects = [];

            for(i=0; i < data.d.results.length; i++) {
                $scope.projects.push({id: data.d.results[i].Master_x0020_ID, cc: data.d.results[i].Title, name: data.d.results[i].deltek_x0020_name});
            }

        })
});

HTML代码

<div data-ng-app="restCalls" class="ng-scope">
   <div id="project_menu_select" data-ng-controller="displayProj" class="ng-scope">
      <p class="ng-binding">ID of selected project is: {{selecteProject.id}} </p> 
      <select data-ng-model="selectedProject" data-ng-options="project.name for project in projects" class="ng-pristine ng-valid ng-empty form-control ng-touched ng-untouched" data-ng-change="getSelectedOption()">
      </select> </div>
   <div id="charge_codes_table" data-ng-controller="displayCC" class="ng-scope"> 
      <table class="table table-striped"> 
         <thead> 
            <tr> 
               <th>Project ID</th> 
               <th>Charge Code</th> 
               <th>Deltek Name</th> 
            </tr> 
         </thead> 
         <tbody>
        <tr data-ng-repeat="project in projects">
        <td data-ng-if="project.id == (option value)">{{project.id}}</td>
        <td data-ng-if="project.id == (option value)">{{project.cc}}</td>
        <td data-ng-if="project.id == (option value)">{{project.name}}</td>
        </tr> 
         </tbody> 
      </table> 
   </div>
</div>

Answer 1

无论如何，您在一个页面中同时拥有表格和选择选项。最好为两者使用单个控制器。

您也可以为这两个控制器使用通用父控制器。

或

您可以使用$ rootScope共享变量。从一个控制器设置为$ rootScope.selectedValue = 2，然后您可以从另一个控制器访问$ rootScope.selectedValue。

或

您可以使用服务来共享函数和变量，如下所示，

app.service("shared", function () { var selectedOption = {}; return { getSelectedOption: function () { return selectedOption; }, setSelectedOption: function (value) { selectedOption = value; } }; });

在单独的控制器中过滤AngularJS表的关闭值

1 个答案: