示例中,根據(jù)ng-if指令顯示不同任務狀態(tài)棕诵,以及判斷任務是否可以操作
<div ng-app="NgifDemoApp" ng-controller="NgifDemoContrl as vm">
<h1>任務列表</h1>
<table class="table">
<thead>
<tr>
<th>任務編號</th>
<th>任務名稱</th>
<th>任務狀態(tài)</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--ng-repeat指令蹭秋,類似foreach循環(huán)-->
<tr ng-repeat="item in vm.taskList">
<td><p>{{ item.Id }}</p></td>
<td><p>{{ item.TaskName }}</p></td>
<td>
<!--此處的效果,也可以通過在TaskModel里面加一個string字符串此叠,返回OwnStatus的字符串結(jié)果來完成-->
<p ng-if="item.OwnStatus==0">準備開工</p>
<p ng-if="item.OwnStatus==1">進行中</p>
<p ng-if="item.OwnStatus==2">已經(jīng)完成</p>
</td>
<td>
<button ng-if="item.OwnStatus==0 || item.OwnStatus==1">更新任務情況</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script>
var app = angular.module('NgifDemoApp', []);
app.controller('NgifDemoContrl', function ($scope, $http) {
var vm = this;
vm.getdata = function () {
$http({
method: 'POST',
url: '/AngularjsStudy/GetNgifData',
data: {}
}).then(function successCallback(data) {
//data有多余屬性纯续,data.data才是controller返回的data
vm.taskList = data.data;
}, function errorCallback(response) {
// 請求失敗執(zhí)行代碼
});
}
vm.getdata();
});
</script>
Controller
public ActionResult GetNgifData()
{
List<TaskModel> list = new List<TaskModel>();
list.Add(new TaskModel() { Id = 1, TaskName = "任務1", OwnStatus = Status.todo });
list.Add(new TaskModel() { Id = 2, TaskName = "任務2", OwnStatus = Status.done });
list.Add(new TaskModel() { Id = 3, TaskName = "任務3", OwnStatus = Status.doing });
list.Add(new TaskModel() { Id = 4, TaskName = "任務4", OwnStatus = Status.doing });
list.Add(new TaskModel() { Id = 5, TaskName = "任務5", OwnStatus = Status.todo });
return Json(list);
}
Model
public enum Status
{
todo=0,
doing=1,
done=2
}
public class TaskModel
{
public int Id { get; set; }
public Status OwnStatus { get; set; }
public string TaskName { get; set; }
}