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; }

}

巴特西

AngularJS ng-if使用

最新文章

热门文章