AngularJS Filter. Фильтрация в AngularJS.

Angular JS предоставляет удобные возможности для фильтрации объектов в зависимости от значения либо самих объектов, либо их полей. В данном примере, мы будем фильтровать объекты по значению поля status. У нас будет checkbox, который будет определять, объекты с каикм значением поля status мы будем показывать. Если галочка стоит то значения -
["STARTED", "NOT_STARTED", "FINISHED"]
если галочка не стоит, то значения
["STARTED", "NOT_STARTED"]

HTML Code

Checkbox показывать объекты со статусом FINISHED.

<div class="col-lg-3 pull-right text-right">
    <input  type="checkbox" id="showFinishedCheckbox"
      ng-model="showFinished" ng-change="showFinishedClicked()">
    <label for="showFinishedCheckbox">Show Finished Clients</label>
</div>

Таблица объектов, в которой используется фильтр.

 <table class="table table-hover">
    <thead>
        <th ng-repeat="item in head" ng-click="changeSorting(item.field)" 
          class="sortable">{{item.title}}
        <span ng-show="displaySorting(item.field, false)">▼</span>
        <span ng-show="displaySorting(item.field, true)">▲</span>
      </th>
    </thead>
    <tbody>
        <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">
     <td><a ng-click="editCampaign(c); $event.stopPropagation()" 
              style="cursor:pointer;">{{c.title}}</a>
     </td>
     <td>{{c.campaignCode}}</td>
     <td>{{c.startDate | date:'mediumDate'}}</td>
     <td>{{c.endDate | date:'mediumDate'}}</td>
     <td>{{getStatus(c.status).name}}</td>
 </tr>
    </tbody>
</table>

Использование фильтра.

 <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">

CoffeScript Code

Изначально показываем объекты у которых поле status имеет значение либо STARTED либо NOT_STARTED

$scope.filteredStatuses = ["STARTED", "NOT_STARTED"]

Изначально не стоит галочка показывать объекты, у которых поле status имеет значение FINISHED

$scope.showFinished = false

Обработчки нажатия на checkbox. Если ставим галочку, то добавляем в массив допустимых статусов статус FINISHED, если убираем галочку, то массив без статуса FINISHED

$scope.showFinishedClicked = () ->
    if $scope.showFinished
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED", "FINISHED"]
    else
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED"]
    return

Непосредственно сам фильтер. Проверяем, если поле status объекта не входит в массив допустимых значений, то не возвращаем ничего. Если же входит то, возвращаем объект.

$scope.statusFilter = (campaign) ->
    if $scope.filteredStatuses.length > 0
        if $.inArray(campaign.status, $scope.filteredStatuses) < 0
            return
    return campaign

Источники

https://docs.angularjs.org/api/ng/filter/filter

https://docs.angularjs.org/guide/filter

http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs

https://docs.angularjs.org/guide/filter#creating-custom-filters

http://jsfiddle.net/Xesued/Bw77D/7/

http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments

http://jsfiddle.net/65Pyj/

JQuery. Получить элемент li листа ul

<div id="test">
<ul>
<li>Im index 0</li>
<li>Im index 1</li>
<li>Im index 2</li>
<li>Im index 3</li>
</ul>
</div>

Получить доступ к третьему элементу (индексация начинается с 0)

$('#test ul > li').eq(2).hide();

Можно еще так

$('#test ul > li:eq(2)').hide();

Можно получить доступ к li элементу с помощью nth-child. В таком случае нумерация начинается с 1.

$('#test ul > li:nth-child(3)').hide();

Источники
http://stackoverflow.com/questions/4591754/jquery-test-ul-li-index2-hide-possible

http://stackoverflow.com/questions/3323186/get-id-of-first-li-of-ul-with-jquery

Javascript. Как проверить что объект пустой

Пустой и непустой объекты

var emptyObject = {};
var notEmptyObject = { foo: "bar" };

Как проверить пустой ли объект

С помощью метода Object.keys()

function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

С помощью JSON.stringify()

function isEmptyObject(emptyObject){
    return JSON.stringify(emptyObject) === '{}';
}

С помощью jQuery

jQuery.isEmptyObject(emptyObject ); // true
jQuery.isEmptyObject(notEmptyObject ); //false

Источники
http://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object

http://stackoverflow.com/questions/4994201/is-object-empty

http://www.jquerybyexample.net/2013/10/jquery-object-null-check-correct-way.html

https://api.jquery.com/jQuery.isEmptyObject/

jQuery. Как динамически добавить или удалить атрибут стиля

Задать элементу только один атрибут стиля

$("#container").css("text-align", "center");

Задать элементу сразу несколько атрибутов стиля

$("#container").css({"position":"relative", "top":"-75px"});

Удалить только атрибут стиля text-align

$("#container").css("text-align", "");

Удалить весь стиль (атрибут style) полностью для элемента

$("#container").removeAttr("style")

Источники
http://stackoverflow.com/questions/883180/how-to-dynamically-add-a-style-for-text-align-using-jquery
http://stackoverflow.com/questions/5394951/adding-and-removing-style-attribute-from-div-with-jquery