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

本文关键字:参数 输入 更新 Angular 何使用 JS 事件 | 更新日期: 2023-09-27 18:00:44

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

我正在寻找一种将解决方案重写为Angular JS应用程序中的页面的方法。示例页面有一个Dropdownlist服务器控件,当选择一个项目时,必须根据页面成员"configJson"的当前值更新div"axviewer"。configJson是从静态C#方法返回的值,该方法将SelectedItem作为输入。


  <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=字符串。空的

    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;
        }
    }

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

从你的问题中我可以理解,你想做的事情似乎没有那么复杂,但我建议你应该先自己尝试。

,我可以帮你一些提示

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

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

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

休息一下,如果你是初学者,我建议你先这样做,以便在你的脑海中清楚地了解是如何工作的

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

我希望能解决你的问题