如何在事件中更改输入参数时使用 Angular JS 更新页面答案

【问题标题】：How to use Angular JS to update a page when an input paramater is changed on an event如何在事件中更改输入参数时使用 Angular JS 更新页面
【发布时间】：2015-09-18 00:39:48
【问题描述】：

我有一个使用 webform (.aspx)、C# 和一些 Javascript 的有效解决方案。我可以在学习使用 Angular JS 时使用一些帮助。

我正在寻找一种将解决方案重写为 Angular JS 应用程序中的页面的方法。 The example page has a Dropdownlist server control, when an item is selected, the div "axviewer" must be updated based the current value of a page member, "configJson". configJson 是从将 SelectedItem 作为输入的静态 C# 方法返回的值。

  <html> <head>
    <title>ActiveX Viewer Sample Launch Page</title>
            <script type="text/javascript">
        $(document).ready(function () {
            // configJson is updated and returned by a C# public static method
            // based on the selection in the list
            var ax = igc.be.client.activex.createInstance(<% =configJson %>);
            ax.render("axviewer");            
        });
    </script> </head> <body>    
    <form runat="server">
        <input type="button" id="prev" value='<' />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" >
            <asp:ListItem>288</asp:ListItem>      
            <asp:ListItem>483</asp:ListItem>
            <asp:ListItem>488</asp:ListItem>
            <asp:ListItem>501</asp:ListItem>                              
        </asp:DropDownList>
    </form>
     <hr />
    <%--Display the Brava Viewer--%>    
    <div id="axviewer"></div>

    <div id="errorMesage" runat="server" visible="false">
        <asp:Label runat="server" ForeColor="Red" ID="Description">Something is wrong!</asp:Label>
    </div> </body> </html>

后面的代码：

公共部分类查看器：System.Web.UI.Page {
私有静态字符串 instanceId;
公共静态字符串 configJson = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        errorMesage.Visible = false;           
        string docId = "273";
        try
        {
            // return a json config string                
            var selectedId = this.DropDownList1.SelectedValue;
            instanceId = this.DropDownList1.SelectedValue;
            configJson = ActiveXViewer.GetViewerConfigJson(instanceId, "admin:admin", docId);  

        }
        catch (Exception ex)
        {
            errorMesage.Visible = true;
            Description.Text = ex.Message;

        }
    }

【问题讨论】：

标签： c# angularjs

【解决方案1】：

从你的问题中我可以理解，看起来你想做的事情并不复杂，但我建议你应该先自己尝试一下。

我可以帮助你一些提示，

首先有一个自定义指令来模仿你正在做的事情，以根据所选项目操作 DIV

提示http://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm

然后使用 ng-select 指令更改下拉选择。 https://docs.angularjs.org/api/ng/directive/select

如果您是初学者，请休息一下，我建议您先进行此操作，以便在您的脑海中清楚地了解 Angular 的工作原理

https://www.codeschool.com/courses/shaping-up-with-angular-js

希望能解决你的问题

【讨论】：