AngularJs + MVC：如何从共享布局视图中的单击链接填充页面视图？答案

【问题标题】：AngularJs + MVC: How to populate page view from a clicked link in shared layout view?AngularJs + MVC：如何从共享布局视图中的单击链接填充页面视图？
【发布时间】：2016-08-26 15:27:34
【问题描述】：

我对 AngularJs 非常陌生，并且正在使用 AngularJs + MVC 进行测试项目，如果这段代码看起来很拙劣，请致歉。

我正试图弄清楚如何将我的共享视图中的点击链接传递给我的 index.cshtml 视图，以便我的索引视图知道点击了哪个链接。理想情况下，我想用角度来做这个，所以它是无缝的。在我的 MVC 项目中，我为我的网站模板创建了一个共享视图。在这个模板中，是一个下拉列表，在从我的数据库中检索值后通过 AngularJs 填充。下拉列表包含下拉列表中每个项目的链接。当用户单击其中一个下拉链接时，我想将调用无缝传递到我的 index.cshtml 视图，但我不确定执行此操作的最佳方法。

这是我到目前为止的代码，它从数据库中检索所有下拉列表值并将它们填充到我的共享视图模板的下拉列表中。这很好用，但现在我不确定当用户单击下拉列表中的链接时该怎么做。我需要做的是根据用户在下拉列表中单击的链接来更改索引视图上的表数据。

在我的共享视图中，我正在通过 Angular 填充我的下拉值 (campaign.Campaign1)。 “SelectedCampaign”只是用户当前选择的活动名称的文本：

<div style="text-align:center">
     <div class="btn-group" ng-controller="menuController">
        <button type="button" class="btn btn-danger">{{SelectedCampaign}}</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
             <span class="caret"></span>
             <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
              <li ng-repeat="campaign in campaigns">
                   <a href="#">{{campaign.Campaign1}}</a>
              </li>                                 
        </ul>
     </div>
 </div>

在我的 Angular MenuController.js 脚本中，我调用了一个名为“GetCampaigns”的 MVC 控制器，然后将结果返回到我的共享视图的下拉列表中：

angular.module('dashboardApp', [])
.controller('menuController', function ($scope, $http) {
    $http.get('/Account/GetCampaigns')
        .success(function (result) {
                $scope.SelectedCampaign = result[0]['Campaign1'];
                $scope.campaigns = result;                
        })
        .error(function (data) {
            console.log(data);
        });
})

感谢您提供的任何帮助。

【问题讨论】：

标签： angularjs asp.net-mvc asp.net-mvc-4

【解决方案1】：

不要使用“a”链接，而是使用 ng-click 并使用 ng-click 指令将当前数据更新为选定的广告系列数据。因此，将所有广告系列放在您的范围内，然后使用 ng-click 调用函数来选择广告系列。比如：

<li ng-repeat="campaign in campaigns">
               <span ng-click="selectCampaign($index)">{{campaign.Campaign1}}</span>
          </li>

您可以使用 $index 获取重复中的索引并使用它来定位数组中的项目：https://docs.angularjs.org/api/ng/directive/ngRepeat

例如

$scope.selectCampaign = function(index){
   $scope.selectedCampaign = $scope.campaigns[index];
}

【讨论】：