示例中,根据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使用的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. part 4 AngularJS ng src directive

  3. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  4. [AngularJS] AngularJS系列(1) 基础篇

    目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...

  5. 从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...

  6. angularJS看MVVM

    从angularJS看MVVM   javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到a ...

  7. js架构设计模式——从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...

  8. .Net Core应用框架Util介绍(一)

    距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...

  9. gulp 在 angular 项目中的使用

    gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...

  10. .Net Core应用框架Util介绍(一)转

    回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时. JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应 ...

随机推荐

  1. SAP ABAP编程 字符串加密-MD5_CALCULATE_HASH_FOR_CHAR

    DATA: str1 TYPE c LENGTH 12 VALUE 'zxcv',       str2 TYPE c LENGTH 32,       str3 TYPE c LENGTH 32. ...

  2. event.relatedTarget、event.fromElement、event.toElement

    在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarg ...

  3. 【26.8%】【CF 46D】Parking Lot

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  4. [Git] Use git add --patch for better commit history and mitigating bugs

    Let's split our changes into separate commits. We'll be able to check over our changes before stagin ...

  5. Spring MVC 请求路径遇到的302问题的解决方法

    302 Found 请求的资源现在临时从不同的URI响应请求.由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求.只有在Cache-Control或Expires中进行了指定的情况下,这 ...

  6. 【u119】中位数

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], ...

  7. 【bzoj2733】永无乡(无旋treap启发式合并 + 并查集)

    传送门 题目分析 起初每个岛都是一个平衡树, 并查集的祖先都是自己.合并两岛时,pri较小的祖先会被作为合并后的祖先, 而两颗平衡树采用启发式合并.查询k值就是基本操作. code #include& ...

  8. SQLite做为本地缓存的应用需要注意的地方

    原文:SQLite做为本地缓存的应用需要注意的地方 今天看到了园友陆敏计的一篇文章<<C#数据本地存储方案之SQLite>>, 写到了SQLite的诸多优点,尤其适应于本地数据 ...

  9. mysql 8 远程连接注意事项

    1.首先如果你是在windows平台下连接linux下的mysql 那么请确保linux下的防火墙开放3306端口 vi /etc/sysconfig/iptables在配置文件里增加一行 -A RH ...

  10. Python 第三方库的安装

    1. pip 进入命令行,使用 pip install pip install numpy 2. 含有 setup.py 文件的第三方库 切换到 setup.py 所在的目录: python setu ...