web-dev-qa-db-fra.com

Comment obtenir un type de variable scope dans une expression angulaire?

Définissons un booléen simple sur la portée:

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
});

Comment puis-je obtenir le type d'une variable dans l'expression? typeOf et Object.prototype.Tostring.call ne fonctionnent pas.

<div ng-controller="MainCtrl" class="container">
        <div>
          {{ b }}
          {{ typeOf(b) }}
          {{ Object.prototype.toString.call(b) }}
        </div>
</div>

Voici JSFiddle: http://jsfiddle.net/g8Ld80x3/2/

javascriptangularjstypes
10
Landeeyo

je pense que le meilleur moyen est de créer un filtre personnalisé et de l'utiliser comme vous le souhaitez dans votre expression. Vous pouvez vérifier this link qui utilise pour obtenir les Object.keys d'un objet

pour votre cas, vous pouvez utiliser

angular.module('customfilter', []).filter('typeof', function() {
  return function(obj) {
    return typeof obj
  };
});
14
Zamboney

Juste pour montrer la réponse de Zamboney appliquée à mon exemple de code:

Manette:

angular.module('customfilter', []).filter('getType', function() {
  return function(obj) {
    return typeof obj
  };
});

var mymodal = angular.module('mymodal', ['customfilter']);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
});

Vue:

<div ng-controller="MainCtrl" class="container">
  <div>
    {{ b }}
    {{ b | getType }}
    <div ng-if="(b | getType) == 'number'">
      It's a number
    </div>
    <div ng-if="(b | getType) == 'boolean'">
      It's a boolean
    </div>
  </div>
</div>

Et du violon: http://jsfiddle.net/g8Ld80x3/5/

6
Landeeyo

Vous ne pouvez pas le faire et pour la bonne raison: Expression angulaire l'analyseur interdit ce genre de choses dans les modèles.

Si vous voulez vraiment pouvoir le faire, je vous recommande de définir explicitement les méthodes d'assistance sur le $rootScope afin qu'il soit disponible dans tous vos modèles:

mymodal.run(function($rootScope) {
    $rootScope.typeOf = function(value) {
        return typeof value;
    };
});

Vous pouvez même faire référence à des méthodes d’utilité propres à Angular:

 mymodal.run(function($rootScope) {
    ['isArray', 'isDate', 'isDefined', 'isFunction', 'isNumber', 'isObject', 'isString', 'isUndefined'].forEach(function(name) {
        $rootScope[name] = angular[name];
    });
});

et utilisez {{ isArray(arr) }} dans les modèles.

4
dfsq

Essayez quelque chose comme ceci dans le contrôleur (je ne pense pas que cela soit possible directement dans l'expression comme vous voulez le faire):

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
    $scope.getBType = function(test){
        return( typeof test);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='mymodal' ng-controller="MainCtrl" class="container">
        <div>
          {{ getBType(b) }}
        </div>
</div>

1
Ionut
$scope.b = new String('name');

// en fonction de la déclaration ci-dessus, l'objet sera le résultat de l'opérateur typeof. Il ne vérifie pas le type de l'opérateur typeof: http://bonsaiden.github.io/JavaScript-Garden/#types.typeof

0
anarchist

HTML

<div ng-controller="MainCtrl" class="container">
        <div>
          {{ b }}<br>
          {{ typeOf(b) }}<br>
        </div>
</div>

JS

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
    $scope.typeOf = function (v){ return (typeof v)};
});

RÉSULTAT

false
boolean
0
georgeawg

Pendant que vous essayez d'accéder au type typeof de la valeur spécifique et dans le code actuel, vous le faites dans la view qui est assez tard pour une telle opération.

Au lieu de cela, vous pouvez créer une fonction dans la portée du contrôleur et la renvoyer à partir de là: 

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.b = false;
    $scope.getTypeof = function(it){ return typeof(it); };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='mymodal' ng-controller="MainCtrl" class="container">
        <div>
          {{ b }} : {{ getTypeof(b) }}
          
        </div>
</div>

0
Jai