условие повтора в угловых js

0

Я использую ng-repeat для повторения строк таблицы

 <td ng-repeat=" (col,row) in rows" ng-if=="col?'IP_ADDRESS' row:'<a>row</a>'">
            {{row}}
 </td>

Я ищу, когда значение col равно IP_ADDRESS, строка 'row' должна быть возвращена в тег привязки. Возможно ли это

выборочные данные

{"IP_ADDRESS":"10.10.10.10","MACHINE":"mymachine"}
Теги:

3 ответа

2
Лучший ответ

Вы используете ng-if неправильно. ng-if будет вставлять элементы HTML, к которым он применяется, если условие является правдивым, иначе оно удалит его. Он не вводит контент в существующий HTML.

так что, возможно (не проверено)

<td ng-repeat="(col,row) in rows">
    <a ng-if="row === IP_ADDRESS" >{{row}}</a>
    <span ng-if="row !== IP_ADDRESS" >{{row}}</span>
 </td>

см. документы: https://docs.angularjs.org/api/ng/directive/ngIf

  • 0
    Большое спасибо, это решило мою проблему ..
1

Возможно, ngBindHtml - это то, что вы ищете.

<td ng-repeat="(col,row) in rows">
    <span ng-bind-html="getHtml(row,col) | to_trusted"></span>
</td>

с этим в вашем *.js

var myApp = angular.module('app', []);

myApp.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

myApp.controller('ctrl', ['$scope', function($scope) {
    $scope.getHtml = function(row, col) {
      return col == "IP" ? '<a href="">' + row + '</a>' : row;
    };
}]);

таким образом, у вас больше контроля над редактированием HTML.

  • 0
    Вы должны быть осторожны при редактировании своего HTML-кода в контроллере. +1 за использование ng-bind-html над jQuery и т. Д., Однако это не поведение, которое должен выполнять ваш контроллер, или, по крайней мере, не ваш контроллер главной страницы. Это должно быть манипулирование вашими службами, директивами, событиями и т. Д. Вы можете извлечь его в отдельный контроллер для этой конкретной функции (монолитные контроллеры такие же плохие). Или даже лучше директива.
  • 0
    @ ste2425 Ты прав! По демонстрационным причинам я тоже мог бы это выразить, но я думаю, что для понимания, это самый короткий путь. ссылка
0
<td ng-repeat=" row in rows">
        <div ng-if="row == 'IP_ADDRESS'">{{row.yourValue}}</div>
        <div ng-if="row != 'IP_ADDRESS'">{{row.yourOtherValue}}</div>
</td>

внутри "yourValue" может быть определен ваш якорный тег. У меня нет структуры "строк", поэтому я попытался упростить ее для логики. Надеюсь, поможет ;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню