示例中，根据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返回的data vm.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; } }转载于:https://www.cnblogs.com/Lulus/p/7874119.html
