AngularJS ng-if使用

示例中,根據(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; }
}
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市灭袁,隨后出現(xiàn)的幾起案子猬错,更是在濱河造成了極大的恐慌,老刑警劉巖茸歧,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倦炒,死亡現(xiàn)場離奇詭異,居然都是意外死亡软瞎,警方通過查閱死者的電腦和手機析校,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來铜涉,“玉大人智玻,你說我怎么就攤上這事≤酱” “怎么了吊奢?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長纹烹。 經(jīng)常有香客問我页滚,道長,這世上最難降的妖魔是什么铺呵? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任裹驰,我火速辦了婚禮,結(jié)果婚禮上片挂,老公的妹妹穿的比我還像新娘幻林。我一直安慰自己贞盯,他們只是感情好,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布沪饺。 她就那樣靜靜地躺著躏敢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪整葡。 梳的紋絲不亂的頭發(fā)上件余,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機與錄音遭居,去河邊找鬼啼器。 笑死,一個胖子當著我的面吹牛俱萍,可吹牛的內(nèi)容都是我干的端壳。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼鼠次,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了芋齿?” 一聲冷哼從身側(cè)響起腥寇,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎觅捆,沒想到半個月后赦役,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡栅炒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年掂摔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赢赊。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡乙漓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出释移,到底是詐尸還是另有隱情叭披,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布玩讳,位于F島的核電站涩蜘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏熏纯。R本人自食惡果不足惜同诫,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望樟澜。 院中可真熱鬧误窖,春花似錦叮盘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吭服,卻和暖如春嚷堡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背艇棕。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工蝌戒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沼琉。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓北苟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親打瘪。 傳聞我的和親對象是個殘疾皇子友鼻,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容