示例中，根据ng-if指令显示不同任务状态，以及判断任务是否可以操作
<div ng-app="NgifDemoApp" ng-controller="NgifDemoContrl as vm"><h1>任务列表</h1><table class="table"><thead><tr><th>任务编号</th><th>任务名称</th><th>任务状态</th><th>操作</th></tr></thead><tbody><!--ng-repeat指令，类似foreach循环--><tr ng-repeat="item in vm.taskList"><td><p>{{ item.Id }}</p></td><td><p>{{ item.TaskName }}</p></td><td><!--此处的效果，也可以通过在TaskModel里面加一个string字符串，返回OwnStatus的字符串结果来完成--><p ng-if="item.OwnStatus==0">准备开工</p><p ng-if="item.OwnStatus==1">进行中</p><p ng-if="item.OwnStatus==2">已经完成</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返回的datavm.taskList = data.data;}, function errorCallback(response) {// 请求失败执行代码});}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; }
}
