Лучший способ запуска AngularJS ng-show

Я создаю блок автозаполнения в AngularJS. Соответствующий код выглядит следующим образом

<input type="text" ng-model="tag">
<div ng-show="tag">
  <ul>
    <li ng-repeat="t in user.tags | filter:{name:tag}">
      <a>{{t.name}}</a>
    </li>
  </ul>
</div>

Я хотел бы знать, что лучший способ показать список предложений, когда "тег" не имеет значения (т.е. я хочу показать все теги, когда пользователь нажимает клавишу "вниз". Не нужно упоминать нажатия клавиш код ответа).

Ответ 1

ng-show работает с любым выражением, которое приводит к bool, поэтому все, что вам нужно сделать, это заменить "тег" на "tag ===" или на эквивалент, если ваш тег будет undefined или null.

Если вы хотите показать только, когда нажата определенная клавиша, я бы создал другую переменную, которую вы установили в true, когда нажата клавиша вниз, и проверьте это, например.

$scope.KeyPressed = false;
$scope.Tags = '';

$scope.ShowTags = function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

Затем в вас div:

<div ng-show="ShowTags()">

См. jsfiddle, например

Если вам нужно изменить какую-либо переменную из плагина jquery, вам может потребоваться использовать

$scope.$apply()

Ответ 2

Я столкнулся с этим вопросом, когда я сам создавал проект angular.

Когда я принял принятый ответ, я обнаружил, что мой браузер продолжает увеличиваться в памяти. Если вы создали метод видимости angular "ShowTags()", это будет непрерывно получать опрос. Вы можете проверить это, установив точку останова в этом методе, и он будет постоянно получать удар. Если вы проверите диспетчер задач и покажете браузер, на котором запущен ваш сайт, память продолжает расти и не останавливается.

По моему мнению, функции области должны использоваться только при использовании триггеров событий: событие click, change event, keypressed - некоторые из примеров.

показ или скрытие не являются событиями, поэтому именно поэтому он получает такой ответ.

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

измените тег html:

<div ng-show="ShowTags()">

<div ng-show="ShowTags">

И в вашем контроллере:

$scope.KeyPressed = false;
$scope.Tags = '';

then create a watch event on what you want to watch for:

//initialize showtag when page loads
$scope.ShowTag = $scope.KeyPressed && $scope.Tags !== '';

//watch for any new changes on keypressed
$scope.$watch('KeyPressed', function (newValue, oldValue) {
     if (newValue && $scope.Tags !== '') {
         $scope.ShowTag = true;
     } else {
         $scope.ShowTag = false;
     }
}

//watch for any new changes on keypressed
$scope.$watch('Tags', function (newValue, oldValue) {
     if (newValue !== "" && $scope.KeyPressed) {
         $scope.ShowTag = true;
     } else {
         $scope.ShowTag = false;
     }
}

Или вы можете перейти на "watchCollection" вместо нескольких часов, например:

$watchCollection('[KeyPressed, Tags]', function (newValue) { }

но с этим, newValue будет массивом, и вам нужно будет получить доступ к конкретным индексам, чтобы получить новыеValues любой переменной, за которой просматривается.

like.. newValue [0] - значение KeyPressed, а newValue [1] - значение тегов

Или согласиться с принятым ответом и свести к минимуму количество часов:

$scope.TruthyVal= function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

$scope.$watch('TruthyVal', function (newValue, oldValue) {
     if (newValue) {
         $scope.ShowTag = true;
     } else {
         $scope.ShowTag = false;
     }
}

который смотрит на значения KeyPressed и теги и изменяет значение TruthyVal. Если TruthyVal изменен, он переходит в наблюдаемую логику.