我理解ng-show并ng-hide影响元素上的类集,并ng-if控制元素是否作为DOM的一部分呈现.
有没有对选择的准则ng-if在ng-show/ ng-hide或反之亦然？
这是我的plnkr:http://plnkr.co/edit/n8cRXwIpHJw3jUpL8PX5？p = preview 你必须点击一个li元素,表格才会出现.输入随机字符串并点击"添加通知".而不是textarea文本,你将得到未定义.
标记:
<ul>
<li ng-repeat="ticket in tickets" ng-click="select(ticket)">
{{ ticket.text }}
</li>
</ul>
<div ui-if="selectedTicket != null">
<form ng-submit="createNotice(selectedTicket)">
<textarea ng-model="noticeText"></textarea>
<button type="submit">add notice</button>
</form>
</div>
JS部分:
$scope.createNotice = function(ticket){
alert($scope.noticeText);
}
返回'undefined'.我注意到当使用ui-if of angular-ui时这不起作用.任何想法为什么这不起作用？怎么解决？
说我检查它和表达,那么这两个不一样吗？
<div *ngIf="expression">{{val}}</div>
<div [hidden]="!expression">{{val}}</div>
好的,我正在试图弄清楚如何根据值显示列表中每个项目的各种动作按钮item.Status.例如:我想,如果只显示编辑按钮item.Status是'New'.解决这个问题的最佳方法是什么？
此外,解决方案需要能够支持多个值.例如,"删除"按钮仅显示'New'和'Completed',但不显示'In Progress'.
这可以通过ng-show完成吗？
<ul class="sidebar-list">
<li class="list-item" ng-repeat="item in requestslist.value | filter:searchText | orderBy:'Modified':true">
<div class="list-item-info">
<ul id="" class="list-inline clearfix">
<li class=""><span id="" class="">#{{item.Id}}</span></li>
<li class=""><span id="" class="bold">{{item.RecipientName}}</span></li>
<li class=""><span id="" class="">{{item.RecipientCompany}}</span></li>
</ul>
<ul id="" class="list-inline clearfix">
<li class=""><span id="" class="label label-primary">{{item.Status}}</span></li>
</ul>
</div>
<div class="list-item-actions">
<div class="btn-group">
<button ng-click="doRemind()" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-bullhorn"></span> Remind</button>
<button ng-click="doView()" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span> View</button>
<button ng-click="doEdit(item)" type="button" …我正在使用fcsaNumber指令检查输入到输入框中的数字的有效性.我得到了这个工作,但我检查的值是动态的,这意味着它可以根据选择的选项而改变.看来这个指令只初始化一次.当选项发生变化时,我需要做些什么来重新初始化？
//this works fine
<input name="Employees" type="text" ng-model="Input.Employees" fcsa-number="{min: 1}" required="">
//this only inits once, so its not dynamic
<input name="Employees" type="text" ng-model="Input.Employees" fcsa-number="{{getMin()}}" required="">
我试图理解ng-if与ng-show的对比.在阅读完文档并在此处查看相关的stackoverflow问题之后,我理解ng-if删除了DOM元素,并且删除了ng-if中的范围变量.在'removed'ng-if元素中的ng-model变量不会出现在$ scope中.
来自Angular ng-if文档: -
请注意,使用ngIf删除元素时,其范围将被销毁,并且在还原元素时会创建新范围.在ngIf中创建的作用域使用原型继承从其父作用域继承.这一点的一个重要含义是,如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语.
请考虑以下代码段: -
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
</head>
<body data-ng-app="myModule">
<div data-ng-controller="TestController">
<input name="first" type="number" data-ng-model="form.x" placeholder="Enter Number X"/>
<input name="second" type="number" data-ng-if="form.x>5" data-ng-model="form.y" placeholder="Enter Number Y"/>
<input type="button" value="Click" ng-click="save()"/>
</div>
<script type="text/javascript">
var myModule = angular.module("myModule",[]);
myModule.controller("TestController",function($scope){
$scope.form = {};
$scope.form.x = 0;
$scope.form.y = 0;
$scope.save = function(){
console.log($scope.form);
};
});
</script>
</html>
这是一个非常简单的用例 - 只有当first大于5时才显示第二个数字输入字段.
保存按钮单击委托控制器中的"保存"功能,它只打印出$ scope的'form'对象.
输入1: - 输入x = 6,y = 2输出1:{x:6,y:2} …
在我的应用程序中,我有一个控制器,其范围有一个模型,用于确定我视图中的条件.非常标准.
调节器
$scope.shouldShow = false;
$scope.seeCoal = true;
视图
<div ng-controller="SomeController" ng-if="shouldShow">
<span id="coal" ng-show="seeCoal"></span>
</div>
很公平.当我把它shouldShow变成真正的东西时,这个div就会呈现出来.
量角器如何解释这个并且它包含标记？如果我的测试没有将shouldShow模型设置为true,那么#coal元素是否会被认为存在element.isPresent()？
此外,如果(在我的测试中)我没有设置shouldShow为truthy(保持为假),并设置seeCoal为false - 我将能够遍历#coal以确认ng-hide该类是否存在,即使它的父级具有ng-if评估为的条件假？
在我正在尝试这个的项目中,我有太多的不确定性,我无法确定量角器在这些情况下应该如何工作.
我的一位同事在工作中向我展示了一种非常奇怪的角度一次性绑定行为.
用例:
当你有一个它的文本绑定元素通过一次内部块是结合的NG-如果有条件的话,如果我们改变这个值,例如添加一些字母,后来改变NG-IF的条件,并经过来自一次性绑定的值已刷新.
HTML:
<div ng-if="a" class="blue">{{ ::text }}</div>
这是一种错误,还是预期的行为？
这是我正在做的一个例子:http://codepen.io/samot/pen/rLJAdN
HTML代码显示表 -
<table class="table table-bordered table-striped table-condensed">
<thead class="TableHeader">
<tr>
<th>Role</th>
<th>Name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)">
<td>{{i.role }}</td>
<td>{{i.name}}</td>
<td>{{i.id}}</td>
</tr>
</tbody>
</table>
Angular JS代码在控制台日志中显示客户信息 -
$scope.showCustomerinfo=function(index) {
console.log("table clicked row -- "+index);
console.log("DOB -- "+$scope.allCustomerInfoArray[index].role);
console.log("Age -- "+$scope.allCustomerInfoArray[index].name);
console.log("Age -- "+$scope.allCustomerInfoArray[index].id);
console.log("DOB -- "+$scope.allCustomerInfoArray[index].dob);
console.log("Age -- "+$scope.allCustomerInfoArray[index].age);
}
现在我想修改上面的代码来隐藏客户角色为"XXX"的行.请让我知道如何实现它.
注 - 我不想从allCustomerInfoArray中删除角色为"XXX"的客户.
我正在使用自定义导航directive,当一些添加/删除导航中的任何内容时,我想反映该导航的更改.如果导航来自范围,那么我可以更新范围,但因为nav来自指令,所以我不知道如何在$http成功时调用该指令.
这是我的指示:
<nav_toolbar uuid=\"pk\" my-method=\"get_navs\"></nav_toolbar>
在这里你可以看到我在指令中使用了一些属性,这有助于我获取精确的导航选项.
指令代码:
app.directive('synapseToolbar', function() {
var controller = ['$scope', '$element', '$attrs', '$http', '$compile','Scopes',
function ($scope, $element, $attrs, $http, $compile, Scopes) {
var uuid = $scope.uuid
// my $http request comes here
// on $http success i'll set this below scope
$scope.synapse_toolbar_icons = a object
}];
return {
restrict: 'EA',
scope: {
uuid: '=',
method: '&myMethod',
},
controller: controller,
link: function (scope, element, attrs) {
var click_fn = scope.method();
$(element).click(function(e, rowid) { …我有dropdowns3.Dropdown首先控制,out Dropdown 2和Dropdown 3哪个下拉列表填充.
我正在使用这个ng-if,我可以使用ng-if第二个下拉列表,但是当我无法使用ng-if第三个下拉列表时.
我弄清楚的原因是,dropdown 2它没有绑定任何值.
我不知道为什么会这样.
码
<select ng-model="selcetedValue">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-if="selcetedValue === 'B'">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-if="selcetedValueSecond === 'H'">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
</select>
<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>
请帮忙.