web-dev-qa-db-fra.com

Comment puis-je désactiver un bouton dans AngularJS s'il y a des éléments dans un tableau?

J'ai un objet: model.data

Comment puis-je désactiver un bouton si cet objet comporte un tableau de questions et si ce tableau comporte plusieurs éléments? 

J'ai essayé:

data-ng-disabled="model.questions.length > 0"

Mais cela ne semble pas fonctionner du tout. 

angularjs
20
user1943020

EDIT: Modification de la réponse en réponse à des publications et à des commentaires

Qu'en est-il de:

data-ng-disabled="checkQuestions()"

Et ensuite dans votre contrôleur:

$scope.checkQuestions = function() {
 if (model.questions.length > 1) { // your question said "more than one element"
   return true;
  }
  else {
   return false;
  }
};

En gros, il existe plusieurs façons d’accomplir cette tâche. une expression, une fonction, une variable liée (comme le montrent les différentes réponses présentées ici). Si aucun d’entre eux ne fonctionne, le problème peut venir de votre modèle. Si vous pouviez clarifier certaines incohérences (voir mes commentaires sur la structure de votre modèle), souhaitez-vous également la désactiver si elle contient quelque chose ou seulement s'il y a plus d'une chose dans la matrice? ), cela aidera à comprendre cela.

Voici un violon qui montre les trois approches; vous verrez qu'ils fonctionnent tous. Comparez votre manette au violon et voyez si elle vient ensemble.

http://jsfiddle.net/jlmcdonald/P8qjR/3/

29
jlmcdonald

Vous pouvez certainement utiliser une expression au lieu d'une fonction. Mais vous pouvez vérifier si le tableau est undefined.

<button ng-disabled="model.questions != undefined && model.questions.length > 0"></button>
25
zsong

Je ne pouvais pas obtenir la réponse @song au travail et je ne voulais pas créer une fonction uniquement pour retourner une longueur de tableau. Je l'ai donc fait fonctionner en créant une autre variable de portée qui renvoyait le tableau array.length.

$scope.modelQuestionsLength = $scope.model.questions.length;

Je pourrais alors faire

<button ng-disabled="modelQuestionsLength > 0"></button>
2
realgt

Je ne pouvais pas utiliser la méthode de travail non définie, alors si quelqu'un d'autre a des problèmes, cela a fonctionné pour moi:

<input ng-disabled="fieldsPermittedForEdit.indexOf('postDate') < 0">

Dans cet exemple, je désactive le champ sauf si postDate existe dans le tableau fieldsPermittedForEdit.

0
Desmond

Créez un modèle puis définissez sa valeur par défaut sur false. Puis modifiez sa valeur sur true si la longueur de votre tableau n'est pas vide. Suivi de la liaison du modèle à l'attribut ng-disabled du bouton.

0
Roseann Solano