Условные данные показать скрыть в Angularjs

Question

Я работаю над приложением, где мне нужно создать отчет таблицы на основе пользовательского фильтра.

И пользователь может фильтровать результат и отправлять новый запрос с использованием другого параметра. В зависимости от одного из флажков и списков результатов я должен показать скрытый столбец в таблице.

Как я могу реализовать угловым способом?

Answer 1

Вы можете использовать ng-show с условием, как это:

<select ng-model="filter"> 
    <option value="blah"></option> 
    <option value="foo"></option> 
</select> 
<table> 
    <tr> 
    <td>1</td> 
    <td ng-show="filter=='blah'">blah blah</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td ng-show="filter=='blah'">foo foo</td> 
    </tr> 
</table> 

Answer 2

Отображение и скрытие столбцов кажется намного сложнее, чем это для меня. Это больше, чем просто применение условного атрибута ng-show к обработчику событий - по крайней мере, я не нашел эту идею работать должным образом.

В настоящее время я изучаю, как скрыть весь столбец данных в таблице базы данных, и я наткнулся на это сообщение в блоге только сейчас. Это похоже на работоспособное решение, и я могу понять, о чем говорит автор, - что для меня очень важно, поскольку я просто изучаю свой путь вокруг Angular. Вот ссылка, если это поможет вам или кому-то еще по этой проблеме. Я сообщу позже, помогло мне это или нет.

http://entwicklertagebuch.com/blog/2013/11/datatable-with-fully-dynamic-columns-in-angularjs/

(Пример кода по ссылке)

function createTDElement(directive) { 
var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>'); 
return table.find('td'); 
} 
app.directive('item', function($compile) { 
    function createTDElement(directive) { 
    var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>'); 
    return table.find('td'); 
    } 

    function render(element, scope) { 
    var column, html, i; 
    for (i = 0; i < scope.columns.length; i++) { 
     column = scope.columns[i]; 
     if (column.visible) { 
     html = $compile(createTDElement(column.directive))(scope); 
     element.append(html); 
     } 
    } 

    } 

    return { 
    restrict: 'A', 
    scope: { 
     item: "=", 
     columns: "=" 
    }, 
    controller: function($scope, $element) { 
     $scope.$watch(function() { 
     return $scope.columns; 
     }, function(newvalue, oldvalue) { 
     if (newvalue !== oldvalue) { 
      $element.children().remove(); 
      render($element, $scope); 
      $compile($element.contents())($scope); 
     } 
     }, true); 
    }, 
    compile: function() { 
     return function(scope, element) { 
     render(element, scope); 
     } 

    } 
    }; 

}); 

Answer 3

Рассмотрим добавление условный стиль в <col/> с ng-style или ng-class