Question

我们有ASP.NET应用程序，并且有一个包含AngularJS代码的页面。该页面上有一个超链接，文本在＆＃34; Select all＆＃34;之间切换。和＆＃34;取消选择所有＆＃34;当你点击它。通过单击超链接，您可以选中和取消选中该组复选框。问题是当我没有＆＃34;形式＆＃34;页面上的标签，没有回帖，这很好。但是，我需要添加＆＃34; form＆＃34;标记和单击超链接开始产生回发，这是不希望的。我不确定为什么。所以，我的问题是 - 发生了什么以及如何保持＆＃34;形式＆＃34;标记并阻止回页？

以下是代码：

1）主要HTML（没有＆＃34;表格＆＃34;标签没有回复，但我需要＆＃34;表格＆＃34;标签）：

<%@ Page language="c#" Codebehind="Default_New.aspx.cs" AutoEventWireup="True" Inherits="Concert.Default_New" %>
<%@ Register TagPrefix="site" TagName="header" Src="includes/Header.ascx" %>
<%@ Register TagPrefix="site" TagName="head" Src="includes/Head.ascx" %>

<!doctype html>

<html id="ng-app" ng-app="cashdeskActionSearchApp">
    <head>
        <site:head id="Head" runat="Server" />        
        <link href="bootstrap/v3/css/bootstrap.min.css" rel="stylesheet" type="text/css"></link>
        <link href="css/actions.css" rel="stylesheet" type="text/css"></link>
        <link href="css/new_search.css" rel="stylesheet" type="text/css"></link>
        <link href="includes/Style.css" rel="stylesheet" type="text/css"></link>
        <script type="text/javascript" src="Scripts/respond.min.js"></script>
        <script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"> </script>
        <script src="Scripts/toastr.js" type="text/javascript"> </script>
        <script src="Scripts/moment.min.js" type="text/javascript"> </script>
        <script src="Scripts/i18n/moment.ru.js" type="text/javascript"> </script>
        <script src="bootstrap/v3/js/bootstrap.min.js" type="text/javascript"> </script>
        <script src="angular/1.2/angular.min.js"></script>
        <script src="angular/1.2/angular-route.min.js"></script>
        <script src="angular/angular-resource.min.js" type="text/javascript"> </script>
        <script src="angular/ui-bootstrap/ui-bootstrap-tpls-0.11.0.min.js" type="text/javascript"> </script>
        <script src="Scripts/i18n/angular-locale_ru.js"></script>
        <script src="/Admin/js/services.js" type="text/javascript"> </script>
        <script src="/Admin/js/directives.js" type="text/javascript"> </script>
        <script src="Scripts/CashdeskActionSearchApp.js" type="text/javascript"> </script>
    </head>
    <body bgcolor="#FFFFFF" text="#333333" link="#000000" vlink="#000000" alink="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <form id="form1" runat="server">
            <site:header id="HeaderInclude" runat="server"/>
            <div ng-view class="container-fluid"></div>
        </form>
    </body>
</html>

2）视图的一部分转到主HTML上的ng-view：

<div id="search_categories_filter">
    <label>Типы мероприятий:</label><br/>
    <button class="btn btn-link btn-mini" ng-click="UpdateCheckBoxes()">
        <span ng-show="checkBoxesState">Select all</span>
        <span ng-hide="checkBoxesState">Unselect all</span>
    </button>
    <div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes">
        <div class="checkbox">
            <label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
        </div>
    </div>
</div>

3）AngularJS：

$scope.UpdateCheckBoxes = function() {
    angular.forEach($scope.actionsQuery.actionTypes, function(cb) {
        cb.checked = $scope.checkBoxesState;
    });
    $scope.checkBoxesState = !$scope.checkBoxesState;
};

$scope.checkBoxesState = false;

AngularJS函数产生回发的问题

0 个答案: