如何使用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中有一个自定义指令,以模仿你正在做的事情,根据所选项目来操纵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
我希望能解决你的问题