باسلام
من یه پارشال ویو دارم به شکل زیر خروجی داره! میخاستم ببینم چجوری بااستفاده از Filter تو انگولار ، لیست نمایش داده شده رو فیلتر کنم
@model IEnumerable<ChakavakArsiveProf.ViewModel.ProfessorVMUploadPic>
<script src="~/Angular.js"></script>
<table class="table tbl table-bordered tabbable table-hover " >
<tr style="color:black">
<th style="color:black">
کد مدرس
</th>
<th style="color:black">
نام
</th>
<th style="color:black">
نام خانوادگی
</th>
<th style="color:black">
سریال پرونده
</th>
<th style="color:black">وضعیت</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ProfID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Family)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProfilePic)
</td>
<td></td>
</tr>
}
</table>
استاد دعوا نکنید!
فایلی که شما انجام دادینو ندارم و خودمم نتونستم بنویسم با توجه به فیلمایی که دارم
نمونه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Angular.js"></script>
<link href="bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
<!--<div ng-app ng-controller="MyController">
<ul>
<li ng-repeat="p in people">
{{p.name +' '+p.family+' ' +p.age}}
</li>
</ul>
</div>-->
<div class="container" ng-app ng-controller="MyController">
<table class="table table-bordered">
<tr>
<th>Name
<br/>
<input type="text" ng-model="filter"/>
</th>
<th>Family</th>
<th>Age</th>
<th>Command</th>
</tr>
<tr ng-repeat="p in people | filter:filter">
<td>{{p.name}}</td>
<td>{{p.family}}</td>
<td>{{p.age}}</td>
<td>
<a class="btn btn-danger">
Delete
</a>
<a class="btn btn-warning">
Edit
</a>
</td>
</tr>
</table>
</div>
<script>
function MyController($scope) {
$scope.people = [
{name:'Iman',family:'Madaeny',age:30},
{name:'Ali',family:'Rezaei',age:25},
{name:'Reza',family:'Alizadeh',age:17},
{name:'Sara',family:'Mohseni',age:42}
];
}
</script>
</body>
</html>
سلام
بازم مثل همیشه راهنمایی خوب
من اینکارو انجام دادم و جواب گرفتم ( البته با ااستفاده از توضیحاتی که شما داده بودین تو کلاس )
سمت کنترلر این کدارو نوشتم برای گرفتن از دیتابیس و ارسال بصورت Json به ویو برای استفاده از AngularJS
public ActionResult ViewProfForFolderByJason()
{
var psm = new ViewModel.ProfessorVMUploadPic();
var q = from Pro in db.Professors
join Fol in db.Folders
on Pro.ProfID equals Fol.ProfessorID into gj
from subPro in gj.DefaultIfEmpty()
orderby Pro.ProfID descending
select new ViewModel.ProfessorVMUploadPic
{
Name = Pro.Name,
Family = Pro.Family,
ProfID = Pro.ProfID,
ProfilePic = (subPro.ProfessorID == null ? String.Empty : subPro.ProfessorID)
};
q = q.Where(x => x.ProfilePic == String.Empty);
return Json(q, JsonRequestBehavior.AllowGet);
}
بعد ویو رو به این صورت نوشتم
یه اکشن ویو خالی ایجاد کردم و کد های زیرو نوشتم
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="~/Angular.js"></script>
<link href="bootstrap-rtl.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app ng-controller="MyCtrl">
<table class="table table-bordered">
<tr>
<th>کد استاد</th>
<th> نام</th>
<th>نام خانوادگی</th>
<th>سریال پرونده</th>
</tr>
<tr>
<td>
<input type="text" class="form-control" ng-model="filter.Name" />
</td>
<td>
<input type="text" class="form-control" ng-model="filter.Family" />
</td>
<td>
<input type="text" class="form-control" ng-model="filter.ProfID" />
</td>
<td>
<input type="text" class="form-control" ng-model="filter.ProfilePic" />
</td>
<td></td>
</tr>
<tr ng-repeat="p in Professor | filter:filter">
<td>{{p.Name}}</td>
<td>{{p.Family}}</td>
<td>{{p.ProfID}}</td>
<td>{{p.ProfilePic}}</td>
<td>
<a class="btn btn-warning">
<i class="glyphicon glyphicon-edit"></i>
</a>
<a class="btn btn-danger">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</table>
</div>
<script>
function MyCtrl($scope,$http) {
$http.get("/Folder/ViewProfForFolderByJason").success(function (result) {
$scope.Professor = result;
});
}
</script>
</body>
</html>
تشکر از آقای مدائنی عزیز
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)