AngularJS ng-if使用

示例中，根據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; }
}