Как убедиться, что одно свойство в объекте всегда верно в javascript

ProgramBox

Как убедиться, что одно свойство в объекте всегда верно в javascript

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#javascript #angularjs #object

Вопрос:

У меня есть объект фильтра, как показано на рисунке. Только один фильтр может быть истинным одновременно, по умолчанию unread он истинен.
Если read установлено значение true, то два других значения являются ложными.
Если read установлено значение false, то по умолчанию unread должно быть установлено значение true.
Как добиться этого с помощью функции вызова updateFilter(filter,value) или предложить лучший способ.

 var filter = {
unread: true,
read: false,
all: false
}

Часть Html:

 <div class="gb-notification-action-top-switch">
   <div class="gb-notification-action-top-switch-text"> Unread:</div>
   <span class="gb-switch filter-btn"ng-click="healthCtrl.info.noti_filter.unread = !healthCtrl.info.noti_filter.unread;healthCtrl.notificationFilterChange('unread')" ng-class="{'active':  healthCtrl.info.noti_filter.unread }">
      <div class="gb-switch-handle"></div>
   </span>
</div>
<div class="gb-notification-action-top-switch">
   <div class="gb-notification-action-top-switch-text"> Read:</div>
   <span class="gb-switch filter-btn"ng-click="healthCtrl.info.noti_filter.read = healthCtrl.info.noti_filter.read;healthCtrl.notificationFilterChange('read')" ng-class="{'active':  healthCtrl.info.noti_filter.read }">
      <div class="gb-switch-handle"></div>
   </span>
</div>
<div class="gb-notification-action-top-switch">
   <div class="gb-notification-action-top-switch-text"> All:</div>
   <span class="gb-switch filter-btn"ng-click="healthCtrl.info.noti_filter.all = !healthCtrl.info.noti_filter.all;healthCtrl.notificationFilterChange('all')" ng-class="{'active':  healthCtrl.info.noti_filter.all }">
      <div class="gb-switch-handle"></div>
   </span>
</div>

1. Можете ли вы рассмотреть возможность изменения пользовательского интерфейса?

2. @JamesThorpe да, вместо этого добавит простой флажок.

3. Хорошо — просто текущий пользовательский интерфейс предполагает, что вы не можете выбрать ни один из них или все, что не имеет смысла. Базовым исправлением было бы использование выпадающего списка с 3 вариантами, но более приятный вариант будет включать 3 кнопки, которые показывают активное состояние — нажатие одной кнопки выключает другие и т. Д

4. если вы установили read значение false и вызываете unread значение false, приводит ли это all также к изменению значения на false?

5. То, что вам нужно, — это то, что называется радиогруппой, а не набором флажков. material.angular.io/components/radio/overview

Ответ №1:

Вы можете попробовать сделать это вот так:

 const filter = {
    unread: false,
    read: true,
    all: false
}

const updateFilter = (keyName, value) => {
  for (let key in filter) {
    filter[key] = (key === keyName) ? value : false;
  }
  if (!Math.max.apply(null, Object.values(filter))) filter.unread = true;
}
  
updateFilter('read', false);
console.log(filter);

1. Это работает. Мне было бы полезно узнать, можете ли вы объяснить эту часть решения !Математика.макс.применить(нуль, Объект.значения(фильтр)). Еще раз спасибо!

2. @Nishanth на самом деле это просто первое, что пришло в голову ) — преобразуйте значения в массив и проверьте, есть ли в нем хотя бы одна истина; Вы также можете написать это так: if(!Object.values(filter).includes(true)) filter.unread = true;

3. я сомневаюсь, что принял лучшее решение. Кстати, на самом деле вам нужно передать только имя ключа в функцию «updateFilter». Не вижу причин, по которым вам нужно было бы отправить значение «false» или «true», вы можете просто передать имя ключа и переключить текущее значение. И затем установите «непрочитанный» ключ на «true», если в объекте нет других истинных значений.

Ответ №2:

Эта функция должна сделать свое дело:

 function updateFilter(filter, target_filter){
    for (var f of Object.keys(filter)){
        filter[f] = false
    }
    filter[target_filter] = true
}

Функция просто перебирает все свойства фильтра и устанавливает для них значение false, а затем устанавливает целевой параметр в значение true.

Итак, если вы сделали что-то вроде:

 var filter = {
unread: true,
read: false,
all: false
}

updateFilter(filter, "unread")

Ваш фильтр будет выглядеть так:

 var filter = {
unread: true,
read: false,
all: false
}

И updateFilter(filter, "all") достал бы тебя:

 var filter = {
unread: false,
read: false,
all: true
}

И так далее, и тому подобное — вы поняли идею.