当我单击按钮 asp.net (angularjs) 时如何重新加载 ng-repeat [英] how to reload ng-repeat when i clicked button asp.net (angularjs)
本文介绍了当我单击按钮 asp.net (angularjs) 时如何重新加载 ng-repeat的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您将如何将数据代码传递给 angularjs 变量.当页面加载时它工作正常.但是当我点击按钮时，过滤数据.服务器端不加载数据.
<块引用>$scope.studentinformation = <%= studentattendancejson %>
c# 代码:
public static string studentattendancejson = string.Empty;protected void Page_Load(object sender, EventArgs e){如果 (!IsPostBack){字符串查询 = "选择 ts.Idx, ts.student_name,ts.father_name,t.attendancedate,t2.class_name,tat.attendanceType FROM tblstudentattendence t " +内部连接 tblStudent ts ON ts.student_id = t.student_id 内部连接 tblclassinfo t2 ON t.class_id = t2.idx" +"内部连接 tblAttendanceType tat ON t.attendancetype_Id = tat.Idx";var gettudentattendance = DbAccess.GetResult(Query);studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);}}protected void btnSearch_Click1(object sender, EventArgs e){string Query = "Select * from tblstudent WHERE student_name = 'Adeel'";var gettudentattendance = DbAccess.GetResult(Query);studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);}HTML\JavaScript\AngularJS 代码:
//Angularjs 变量<script type="text/javascript">var app = angular.module('myApp', []);app.controller('myCtrl', ['$scope', '$filter', function ($scope, $filter) {$scope.currentPage = 0;$scope.pageSize = 100;$scope.data = [];$scope.q = '';$scope.studentinformation = <%= studentattendancejson %>$scope.getData = 函数 () {返回 $filter('filter')($scope.studentinformation, $scope.q)}$scope.numberOfPages = 函数 () {return Math.ceil($scope.getData().length/$scope.pageSize);}}]);app.filter('startFrom', function () {返回函数(输入，开始){开始 = + 开始；//解析为int返回 input.slice(start);}});<tr ng-repeat="学生信息中的信息| filter:q | startFrom:currentPage*pageSize | limitTo:pageSize"><td>{{info.student_name}}</td><td>{{info.father_name}}</td><td>{{info.class_name}}</td><td>{{info.attendancedate |日期:'dd-MM-yyyy'}}</td><td ng-if="info.attendanceType == 'Present'"><button type="button" class="btn btn-success btn-circle"><i class="fa fa-check"></i></td><td ng-if="info.attendanceType == '缺席'"><button type="button" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></td><td ng-if="info.attendanceType == '离开'"><button type="button" class="btn btn-warning btn-circle"><i class="fa fa-list"></i></td></tr>
<asp:Button ID="btnSearch" runat="server" class="btn btn-primary" OnClick="btnSearch_Click1" Text="Search Student" Width="170px"/> <asp:Button ID="btnClearTxt" runat="server" class="btn btn-primary" Text=" Clear Text" Width="170px"/>页面加载工作正常
按钮点击结果
解决方案
终于解决了我的问题 :)
$scope.myData.doClick = function () {$http.post('abc.aspx/GetEmployees', { response: {} }).then(函数成功回调(响应){$scope.studentinformation = {};$scope.studentattendance = JSON.parse(response.data.d);}).error(function (response, status, headers, config) {$scope.status = 状态；});}//HTML
<div ng-click="myData.doClick()">点击这里</div>//c#
[WebMethod]公共静态字符串 GetEmployees(){string Query "Select * from tblstudent WHERE student_name = 'Adeel'";var gettudentattendance = DbAccess.GetResult(Query);studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);返回学生出勤json；}带参数的Ajax调用
$scope.myData.doClick = function (item,event) {var startdate = document.getElementById('txtstart').value;var enddate = document.getElementById('txtend').value;$.ajax({类型:POST"，url: "studentattendance.aspx/GetEmployees",数据:JSON.stringify({标题:开始日期，歌曲名:结束日期})，contentType: "application/json; charset=utf-8",数据类型:json"，成功:功能(味精){$scope.studentattendance = {};$scope.studentattendance = JSON.parse(msg.d);$scope.$apply();},错误:函数(味精){警报(msg.d)；}});}ASP.NET C#//
public static string GetEmployees(string title, string songname){}How would you pass data code to angularjs variable. its working fine when the page loads. But when I click the button, for filter data. The server side does not load data.
$scope.studentinformation = <%= studentattendancejson %>
c# code:
public static string studentattendancejson = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string Query = "SELECT ts.Idx, ts.student_name,ts.father_name,t.attendancedate,t2.class_name,tat.attendanceType FROM tblstudentattendence t " +
"INNER JOIN tblStudent ts ON ts.student_id = t.student_id INNER JOIN tblclassinfo t2 ON t.class_id = t2.idx " +
"INNER JOIN tblAttendanceType tat ON t.attendancetype_Id = tat.Idx";
var getstudentattendance = DbAccess.GetResult(Query);
studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
}
}
protected void btnSearch_Click1(object sender, EventArgs e)
{
string Query = "Select * from tblstudent WHERE student_name = 'Adeel'";
var getstudentattendance = DbAccess.GetResult(Query);
studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
}
HTML\JavaScript\AngularJS code:
//Angularjs variable
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 100;
$scope.data = [];
$scope.q = '';
$scope.studentinformation = <%= studentattendancejson %>
$scope.getData = function () {
return $filter('filter')($scope.studentinformation, $scope.q)
}
$scope.numberOfPages = function () {
return Math.ceil($scope.getData().length / $scope.pageSize);
}
}]);
app.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>
<tr ng-repeat="info in studentinformation| filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
<td>{{info.student_name}}</td>
<td>{{info.father_name}}</td>
<td>{{info.class_name}}</td>
<td>{{info.attendancedate | date:'dd-MM-yyyy'}}</td>
<td ng-if="info.attendanceType == 'Present'"> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-check"></i></td>
<td ng-if="info.attendanceType == 'Absent'"> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></td>
<td ng-if="info.attendanceType == 'Leave'"> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-list"></i></td>
</tr>
<asp:Button ID="btnSearch" runat="server" class="btn btn-primary" OnClick="btnSearch_Click1" Text="Search Student" Width="170px" />
<asp:Button ID="btnClearTxt" runat="server" class="btn btn-primary" Text=" Clear Text" Width="170px" />
</div>
Page load working fine
button clicked result
解决方案
Finally I Solve my Problem :)
$scope.myData.doClick = function () {
$http.post('abc.aspx/GetEmployees', { response: {} })
.then(function successCallback(response) {
$scope.studentinformation = {};
$scope.studentattendance = JSON.parse(response.data.d);
})
.error(function (response, status, headers, config) {
$scope.status = status;
});
}
//HTML
<div ng-click="myData.doClick()">Click here</div>
//c#
[WebMethod]
public static string GetEmployees()
{
string Query "Select * from tblstudent WHERE student_name = 'Adeel'";
var getstudentattendance = DbAccess.GetResult(Query);
studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
return studentattendancejson;
}
Ajax call with parameter
$scope.myData.doClick = function (item,event) {
var startdate = document.getElementById('txtstart').value;
var enddate = document.getElementById('txtend').value;
$.ajax({
type: "POST",
url: "studentattendance.aspx/GetEmployees",
data: JSON.stringify({ title: startdate, songname: enddate}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$scope.studentattendance = {};
$scope.studentattendance = JSON.parse(msg.d);
$scope.$apply();
},
error: function (msg) {
alert(msg.d);
}
});
}
ASP.NET C#//
public static string GetEmployees(string title, string songname)
{
}
这篇关于当我单击按钮 asp.net (angularjs) 时如何重新加载 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
