如何使用javascript在onsen ui中的ons模板中附加文本
how to append text in ons template in onsen ui using javascript
我是onsen UI的新手，我想在通过点击或加载功能加载模板时添加一些数据
我尝试过使用Javascript和jquery，但它不起的作用
请帮助
提前感谢
index.html
<body>
<ons-navigator var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" ><img src="img/logo-sg.jpg" /></div>
</ons-toolbar>
<div style="text-align: center">
<br>
<p >'Im building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?</p>
<ons-button modifier="light" onclick="myNavigator.pushPage('login.html', { animation : 'slide' } )">
Login Page
</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id="login.html">
<ons-page>
<ons-page>
<ons-toolbar>
<div class="center">Log In</div>
<div class="right"><ons-toolbar-button>Close</ons-toolbar-button></div>
</ons-toolbar>
<div class="login-form">
<input type="email" id="uname" class="text-input--underbar" placeholder="Email" value="">
<input type="password" id="pass" class="text-input--underbar" placeholder="Password" value="">
<br><br>
<ons-button modifier="large" id="btnSubmit" onclick="SignIn();" class="login-button">Log In</ons-button>
<br><br>
<ons-button modifier="quiet" onclick="#" class="forgot-password">Forgot password?</ons-button>
<ons-button modifier="quiet" onclick="myNavigator.pushPage('signup.html', { animation : 'slide' } )" class="forgot-password">SignUp</ons-button>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Back to Home
</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="signup.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Sign up</div>
</ons-toolbar>
<div class="formarea">
<div class="form-row">
<input type="text" id="txtName" class="signup text-input--underbar width-full" placeholder="Name" value="">
</div>
<div class="form-row">
<input type="text" id="txtNewUserName" class="signup text-input--underbar width-full" placeholder="Email" value="">
</div>
<div class="form-row">
<input type="password" id="txtNewPassword" class="text-input--underbar width-full" placeholder="Password" value="">
</div>
<div class="lucent">
<p class="note">Password - 6 characters or more</p>
</div>
<div class="vspc form-row">
<ons-button modifier="large--cta" onclick="SignUp();" >Sign up</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="dashbord.html">
<ons-page>
<input type="hidden" id="hfDasId" />
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">MENU</div>
<div class="right"><ons-button onclick="RedirectCart()"><img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button></ons-tab></div>
</ons-toolbar>
<ons-row>
<ons-col ><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/my-account.jpg"></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/purchase.jpg" ></ons-button></ons-col>
</ons-row>
<ons-row>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/switch.jpg" ></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/redemption.jpg" ></ons-button></ons-col>
</ons-row>
<ons-row>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/account-statement.jpg" ></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/chanhe-pin.jpg" ></ons-button></ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-template id="purchase.html">
<ons-page>
<input type="hidden" id="hfId" />
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">MENU</div>
<div class="right"><ons-button onclick="RedirectCart()"><img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button></ons-tab></div>
</ons-toolbar>
<table>
<tr>
<td>Scheme Type </td>
<td>
<select id="ddlSchemeType" >
<option value="Equity">Equity</option>
<option value="Redem">Redem</option>
</select></td>
</tr>
<tr>
<td>
Plan
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Plan" checked>
<div class="button-bar__button">Direct</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Plan">
<div class="button-bar__button">Regular</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Scheme </td>
<td>
<select id="ddlScheme">
<option value="Kotak">Kotak</option>
<option value="ICICI">ICICI</option>
</select></td>
</tr>
<tr>
<td>
Dividend
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Dividend" checked>
<div class="button-bar__button">Reinvest</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Dividend">
<div class="button-bar__button">PayOut</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
Amount($)
</td>
<td>
<input type="text" id="txtAmt" class="text-input--underbar width-full" />
</td>
</tr>
<tr>
<td>Payout bank </td>
<td>
<select id="ddlPayoutBank">
<option value="ICICI">ICICI</option>
<option value="PNB">PNB</option>
<option value="SBI">SBI</option>
<option value="HDFC">HDFC</option>
</select></td>
</tr>
<tr></tr>
<tr>
<td style="padding:0px;" >
<ons-button modifier="large" onclick="purchase();" >Submit</ons-button>
</td>
<td style="padding:0px;" >
<ons-button modifier="large" >Reset</ons-button>
</td>
</tr>
</table>
</ons-page>
</ons-template>
<ons-template id="cart.html">
<ons-page id="cart">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Cart</div>
<div class="right"><img src="img/blank.png" onload="CartDetail()" /> </div>
</ons-toolbar>
<a id="ab" href="#"></a>
<table id="product"> </table>
<div id="tblProduct" style="display: none;" >
<table>
<tr class="data">
<td class="Scheme">
</td>
<td class="Amount">
</td>
<td>
<input id="btnDelete" type="button" value="Delete" />
</td>
</tr>
</table>
</div>
</ons-page>
</ons-template>
</body>
jquery
CartDetail = function () {
var prod = $('#product');
$.ajax({
url: "http://localhost:60595/api/purchase/?userId=" + parseFloat($("#hfDasId").val()), //local
type: "GET",
contentType: "json",
success: function (data) {
$.each(data, function (index, Purchase) {
var $row = $('#tblProduct').find('.data').clone().attr("id", "row_" + Purchase.Id);
$row.find(".Scheme").html(Purchase.Scheme);
$row.find(".Amount").html(Purchase.Amount);
$row.find("#btnDelete").click(function () {
$.ajax({
url: "http://localhost:60595/api/purchase/" + Purchase.Id, //local
type: "PUT",
success: function () {
$row.remove();
},
error: function (jqXHR, exception) {
alert(Purchase.Id);
if (jqXHR.status === 0) {
alert('Not connect.'n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.'n' + jqXHR.responseText);
}
}
});
});
prod.append($row);
});
}
});
}
当你说时，你还没有确切地说出你做了什么
我尝试过使用Javascript和jquery，但它不起的作用
因此，我假设您尝试在模板中添加脚本。如果是，请参考此问题
在任何情况下，如果您的其他映像和localhost资产已经到位，那么代码笔对您提供的代码进行重新创建应该会起作用。链接到我的代码笔
按照@Fran Dios的评论，完成代码或首选代码，尝试以较小的形式重新创建您的问题，以便我们能够理解并尝试解决您的特定问题。
angular.module('TestApp', ['onsen'])
.controller('cartController', function($scope) {
$scope.CartDetail = function() {
var prod = $('#product');
$.ajax({
url: "http://localhost:60595/api/purchase/?userId=" + parseFloat($("#hfDasId").val()), //local
type: "GET",
contentType: "json",
success: function(data) {
$.each(data, function(index, Purchase) {
var $row = $('#tblProduct').find('.data').clone().attr("id", "row_" + Purchase.Id);
$row.find(".Scheme").html(Purchase.Scheme);
$row.find(".Amount").html(Purchase.Amount);
$row.find("#btnDelete").click(function() {
$.ajax({
url: "http://localhost:60595/api/purchase/" + Purchase.Id, //local
type: "PUT",
success: function() {
$row.remove();
},
error: function(jqXHR, exception) {
alert(Purchase.Id);
if (jqXHR.status === 0) {
alert('Not connect.'n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.'n' + jqXHR.responseText);
}
}
});
});
prod.append($row);
});
}
});
}
});<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<body ng-app="TestApp">
<ons-page>
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">
<img src="img/logo-sg.jpg" />
</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<p>'Im building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?</p>
<ons-button modifier="light" onclick="myNavigator.pushPage('login.html', { animation : 'slide' } )">
Login Page
</ons-button>
</div>
</ons-navigator>
</ons-page>
<ons-template id="login.html">
<ons-page>
<ons-page>
<ons-toolbar>
<div class="center">Log In</div>
<div class="right">
<ons-toolbar-button>Close</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="login-form">
<input type="email" id="uname" class="text-input--underbar" placeholder="Email" value="">
<input type="password" id="pass" class="text-input--underbar" placeholder="Password" value="">
<br>
<br>
<ons-button modifier="large" id="btnSubmit" onclick="SignIn();" class="login-button">Log In</ons-button>
<br>
<br>
<ons-button modifier="quiet" onclick="#" class="forgot-password">Forgot password?</ons-button>
<ons-button modifier="quiet" onclick="myNavigator.pushPage('signup.html', { animation : 'slide' } )" class="forgot-password">SignUp</ons-button>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Back to Home
</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="signup.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Sign up</div>
</ons-toolbar>
<div class="formarea">
<div class="form-row">
<input type="text" id="txtName" class="signup text-input--underbar width-full" placeholder="Name" value="">
</div>
<div class="form-row">
<input type="text" id="txtNewUserName" class="signup text-input--underbar width-full" placeholder="Email" value="">
</div>
<div class="form-row">
<input type="password" id="txtNewPassword" class="text-input--underbar width-full" placeholder="Password" value="">
</div>
<div class="lucent">
<p class="note">Password - 6 characters or more</p>
</div>
<div class="vspc form-row">
<ons-button modifier="large--cta" onclick="SignUp();">Sign up</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="dashbord.html">
<ons-page>
<input type="hidden" id="hfDasId" />
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">MENU</div>
<div class="right">
<ons-button onclick="RedirectCart()">
<img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button>
</ons-tab>
</div>
</ons-toolbar>
<ons-row>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/my-account.jpg">
</ons-button>
</ons-col>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/purchase.jpg">
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/switch.jpg">
</ons-button>
</ons-col>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/redemption.jpg">
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/account-statement.jpg">
</ons-button>
</ons-col>
<ons-col>
<ons-button class="nobackgroud" onclick="RedirectPurch()">
<img src="img/chanhe-pin.jpg">
</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-template id="purchase.html">
<ons-page>
<input type="hidden" id="hfId" />
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">MENU</div>
<div class="right">
<ons-button onclick="RedirectCart()">
<img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button>
</ons-tab>
</div>
</ons-toolbar>
<table>
<tr>
<td>Scheme Type</td>
<td>
<select id="ddlSchemeType">
<option value="Equity">Equity</option>
<option value="Redem">Redem</option>
</select>
</td>
</tr>
<tr>
<td>
Plan
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Plan" checked>
<div class="button-bar__button">Direct</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Plan">
<div class="button-bar__button">Regular</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Scheme</td>
<td>
<select id="ddlScheme">
<option value="Kotak">Kotak</option>
<option value="ICICI">ICICI</option>
</select>
</td>
</tr>
<tr>
<td>
Dividend
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Dividend" checked>
<div class="button-bar__button">Reinvest</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Dividend">
<div class="button-bar__button">PayOut</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
Amount($)
</td>
<td>
<input type="text" id="txtAmt" class="text-input--underbar width-full" />
</td>
</tr>
<tr>
<td>Payout bank</td>
<td>
<select id="ddlPayoutBank">
<option value="ICICI">ICICI</option>
<option value="PNB">PNB</option>
<option value="SBI">SBI</option>
<option value="HDFC">HDFC</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td style="padding:0px;">
<ons-button modifier="large" onclick="purchase();">Submit</ons-button>
</td>
<td style="padding:0px;">
<ons-button modifier="large">Reset</ons-button>
</td>
</tr>
</table>
</ons-page>
</ons-template>
<ons-template id="cart.html" ng-controller="cartController as cartCtrl">
<ons-page id="cart">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Cart</div>
<div class="right">
<img src="img/blank.png" ng-click="CartDetail()" />
</div>
</ons-toolbar>
<a id="ab" href="#"></a>
<table id="product"></table>
<div id="tblProduct" style="display: none;">
<table>
<tr class="data">
<td class="Scheme">
</td>
<td class="Amount">
</td>
<td>
<input id="btnDelete" type="button" value="Delete" />
</td>
</tr>
</table>
</div>
</ons-page>
</ons-template>
</body>相关文章：
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- jquery中的文本框验证
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- Sails.js:同时发布文本输入和一个文件
- 当鼠标悬停在文本中的单词上时显示警报
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 将纯文本URL转换为可单击链接
- 如何使用nodes和.createElement(“b”）将文本加粗
- 如何使用javascript在onsen ui中的ons模板中附加文本
