- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个由 Web 服务 JSON 制成的表,每一行都有一个按钮来标记要删除的行。当您单击行按钮时,JS 警报会显示行元素的 id,我还需要在行上添加“危险” Bootstrap 类。现在,单击按钮时我可以看到行元素 id,并将该 id 添加到列表中,以便稍后将其发送到 Web 服务。
这是我的观点:
<table class="table table-condensed">
<tr>
<th>#</th>
<th><a href="" ng-click="sortField = 'ordre'; reverse = !reverse">Prioritat</a></th>
<th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Atribut</a></th>
<th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Tipus</a></th>
<th><a href="" ng-click="sortField = 'midaAtribut'; reverse = !reverse">Mida</a></th>
<th><a href="" ng-click="sortField = 'atributObligatori'; reverse = !reverse">Obligatori</a></th>
<th><a href="" ng-click="sortField = 'observacions'; reverse = !reverse">Observacions</a></th>
</tr>
<tr ng-repeat="(key, value) in atrb">
<td>
<a href="" ng-click="alert(value.idatributs_actiu)" ng-model="elimina"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
<td>
<input type="number" ng-model="value.ordre" value="value.ordre" />
</td>
<td>
<input type="value.valor" ng-model="value.nomAtribut" value="value.nomAtribut" />
</td>
<td>
{{value.valor}}
</td>
<td>
<input type="value.valor" ng-model="value.midaAtribut" value="value.midaAtribut" />
</td>
<td>
<input type="checkbox" ng-model="value.atributObligatori" value="value.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
</td>
<td>
<input type="value.valor" ng-model="value.observacions" value="value.observacions" />
</td>
</tr>
Controller :
$scope.alert = function (index) {
$window.alert('click a borrar id: ' + index); // Show JS alert with id
$scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS
$scope.elimina = true;
$scope.class = 'danger';
}
我一直在尝试使用ngClass来做到这一点和以下 other examples我什么也没得到,甚至连 JS 警报也没有,JS 控制台上也没有显示任何内容。
编辑:
我放置了完整的 Controller 代码:
// Edita tipus d'actius
assets.controller('EditaTipusCtrl', function ($scope, $http, $routeParams, $window) {
$scope.refresh = function () {
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/' + $routeParams.id).success(function (data) {
$scope.atrb = data;
});
};
$scope.alert = function (index, rowScope) {
// rowScope.class = 'danger';
$window.alert('click a borrar id: ' + index); // Show JS alert with id
$scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS
$scope.elimina = true;
rowScope.addClass = 'danger';
}
$scope.refresh();
// Construeix combo per definir tipus atributs (String, Date, Text)
$http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function (data) {
$scope.options = data;
});
$scope.nousAtributs = [];
$scope.atributsExistentsEliminar = [];
$scope.addNewLine = function () {
var newRow = {
"nomAtribut": "",
"tipus": "",
"mida": '',
"prioritat": "",
"obligatori": "",
"observacions": "",
"nomTipusActiu": $routeParams.id // nom del tipus d'actiu
};
$scope.nousAtributs.push(newRow);
}
$scope.addAtributsExistentsEliminar = function (id) {
$scope.atributsExistentsEliminar.push(id);
}
$scope.showAtributsEliminar = function(){
angular.forEach($scope.atributsExistentsEliminar, $scope.show);
}
$scope.show = function (id) {
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' + id + '.json').success(function (data) {
$scope.sts = data.status;
$window.alert($scope.sts);
});
if ($scope.sts.status == 'IN_USE') {
$window.alert('Aquest atribut no es pot eliminar perque és en ús');
}
}
$scope.saveChanges=function(){
angular.forEach($scope.atrb, $scope.sendChanges);
angular.forEach($scope.nousAtributs, $scope.saveNewAttributtes);
$('#myModal').modal('show');
$scope.refresh();
}
$scope.sendChanges=function(atribut){
$http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita', atribut).success(function (data) {
$scope.atrb = data;
});
}
$scope.saveNewAttributtes=function(atribut){
$http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita/nouatribut', atribut).success(function (data){
$scope.atrb = data;
});
}
$scope.removables = function () {
}
});
已解决:
Your current code tries to use the parent scope, which is why it's not working as you expected. You can simply pass in the scope to the alert function. So
$scope.alert = function (index, rowScope) {
...
rowScope.class = 'danger';
}with your template as
...
<tr ng-repeat="(key, value) in atrb" ng-class="class">
<td>
<a href="" ng-click="alert(value.idatributs_actiu, this)"...Fiddle - https://jsfiddle.net/y0rtLhyj/
最佳答案
您当前的代码尝试使用父作用域,这就是它无法按您预期工作的原因。您只需将范围传递给 alert
函数即可。所以
$scope.alert = function (index, rowScope) {
...
rowScope.class = 'danger';
}
您的模板为
...
<tr ng-repeat="(key, value) in atrb" ng-class="class">
<td>
<a href="" ng-click="alert(value.idatributs_actiu, this)"...
<小时/>
fiddle - https://jsfiddle.net/y0rtLhyj/
<小时/>也就是说,正确的方法是在您的 value
对象上添加一些内容来表明它已被删除。然后用它来驱动ng-class
。这样你的 Controller 中就没有 View 属性(即class
)。
关于javascript - Angular 表,使用 ngClass 和 ng-repeat 添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36174442/
我的代码 "> 我想做的是 如果外层 ng-repeat 中的 n 为 0,则 div.book_container 将如下所示: 否则,di
嗨,我有一个用于 ng-repeat-start 和 end 的简单用例,并且工作正常,当我想添加内部 ng-repeat 时出现问题。 这是我的代码 {{e}} {{obj.descr
我正在查看一长串 DNA 核苷酸,并正在寻找以起始代码“AAA”开头并以终止代码“CCC”结尾的序列。由于核苷酸以三联体形式出现,因此我找到的每个序列开始和结束之间的核苷酸数必须是三的倍数。 例如,'
我有这个: .... #{item.product.codigoProduto} #{m.description} ... listRequ
我从服务请求中返回了以下 json 数据: { "entries": [{ "id": 2081, "name": "BM", "niceNam
在 Aurelia 中嵌套 repeat.for 时,内部 repeat.for 无权访问其父 repeat.for 中使用的变量>. 示例 ${x} - ${y} 在上面的示
我有一个带有类别的对象,在这个对象内部有一个名为 items 的对象,其中包含带有 items 的对象。 现在我想重复显示这样的项目: {{cat
我有... html, body { background-size: contain; background-repeat: no-repeat; } 作为我的 CS
我的问题如下:旋转时,由重复图案组成的背景发生变化,因此图案被拉伸(stretch)而不是重复。可能有什么问题? 我有这个由重复图案组成的背景: 最佳答案 您必须手动设置重复模式: parent =
关于下面的元素 如何编辑 element.style?我想要 background-repeat : no-repeat; 不确定从哪里设置它。 element { display: blo
我有一个 Observable,我想定期重复,但仅限于以下条件: apiInterface.getData() // returns Observable ... // processing is h
我无法停止 td 元素中的图像重复。它看起来很难看。我该如何解决这个问题?我也添加了 background-repeat: no-repeat 代码,但它仍然无法正常工作。请不要建议从我的 td 宽度
我想知道以下哪个示例的效果更好。如果性能相同,哪个读起来更好? 示例 1(重复选择器) .helpfulCommenter, .questionTroll { 颜色:#f00; } .question
我正在尝试创建 tooltip对于通过 ng-repeat. 创建的表的第一行 但是工具提示没有呈现。 HTML $(document).ready(function () {
我正在开发一个页面,我需要在其中显示一些框(使用 ng-repeat ),其中包含 channel 信息以及显示位置(城市)。 我面临的问题是当我重复第二个 ng-repeat : 这应该获得第一个
我在另一个 ng-repeat 中有 ng-repeat,并且两者都有分页数据。 主要的工作正常,但 ng-repeat 内的分页数据并不总是工作。它会抛出控制台错误。 错误:[$interpolat
所以我有这个小问题。我对所有项目使用 ng-repeat,我们称它们为国家,每个项目本身都有一个 ng-repeat 作为城市等子类别。我用国家/地区填充下拉菜单。 所以我有这样的国家列表: 美国 德
我有一条从 Angular $resource promise 返回的记录,如下所示。 记录是一个数组,每个记录数组中都有另一个变量数组。我尝试在我的 View 中显示如下。 div(ng-repe
我需要使用 ng-repeat 来生成多个元素,但这些元素不能分别包装在 div 内(这是用于框布局的目的,其中框布局仅适用于直接子元素)。例如,我需要这个结果: Head 1 Body 1
我已经看到(很多)许多教程和装饰器的片段 w/和 w/o 参数,包括我认为是规范答案的两个:Decorators with arguments , python decorator arguments
我是一名优秀的程序员,十分优秀!