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使用的更多相关文章
- 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 ...
- part 4 AngularJS ng src directive
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- [AngularJS] AngularJS系列(1) 基础篇
目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...
- 从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...
- angularJS看MVVM
从angularJS看MVVM javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到a ...
- js架构设计模式——从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...
- .Net Core应用框架Util介绍(一)
距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...
- gulp 在 angular 项目中的使用
gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...
- .Net Core应用框架Util介绍(一)转
回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时. JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应 ...
随机推荐
- 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. ...
- event.relatedTarget、event.fromElement、event.toElement
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarg ...
- 【26.8%】【CF 46D】Parking Lot
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- [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 ...
- Spring MVC 请求路径遇到的302问题的解决方法
302 Found 请求的资源现在临时从不同的URI响应请求.由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求.只有在Cache-Control或Expires中进行了指定的情况下,这 ...
- 【u119】中位数
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], ...
- 【bzoj2733】永无乡(无旋treap启发式合并 + 并查集)
传送门 题目分析 起初每个岛都是一个平衡树, 并查集的祖先都是自己.合并两岛时,pri较小的祖先会被作为合并后的祖先, 而两颗平衡树采用启发式合并.查询k值就是基本操作. code #include& ...
- SQLite做为本地缓存的应用需要注意的地方
原文:SQLite做为本地缓存的应用需要注意的地方 今天看到了园友陆敏计的一篇文章<<C#数据本地存储方案之SQLite>>, 写到了SQLite的诸多优点,尤其适应于本地数据 ...
- mysql 8 远程连接注意事项
1.首先如果你是在windows平台下连接linux下的mysql 那么请确保linux下的防火墙开放3306端口 vi /etc/sysconfig/iptables在配置文件里增加一行 -A RH ...
- Python 第三方库的安装
1. pip 进入命令行,使用 pip install pip install numpy 2. 含有 setup.py 文件的第三方库 切换到 setup.py 所在的目录: python setu ...