ng-tagsInput ne fonctionne pas

JSng-tagsInput ne fonctionne pas

var app = angular.module('plunker', ['ngTagsInput']); 
//'ngTagsInput' 
app.controller('MainCtrl', function($scope, $http) { 
    $scope.tags = []; 

    $scope.loadTags = function(query) { 
    return $http.get('http://localhost/search.php?term='+query); 
    }; 
});

HTML:

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    <!--<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script> --> 
    <script src="ng-tags-input.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

     <div class="container-fluid"> 
      <div> 
       <tags-input ng-model="tags" > 
      <auto-complete source="loadTags($query)"></auto-complete> 
      </tags-input> 
      </div> 

     </div> 



    <p>Model: {{tags}}</p> 

    </body> 

</html>

Ceci est un exemple de code html qui peut afficher la barre de filtre en fonction de l'étiquette. Mais je veux intégrer avec déjà implémenté une autre application. Cette application a sa propre application, contrôleur défini. Le problème est que je ne peux pas voir les changements, même après avoir fait les changements dans le modèle (L'application principale utilise le modèle de moustache). Ce sont les changements que j'ai faits.

regardant la section JS je viens d'ajouter [ 'ngTagsInput'] à la définition de l'application

var app = angular.module('staticSelect', ['ui.bootstrap','ngTagsInput']); 
app.controller('ExampleController', ['$scope', '$http', '$rootScope','$timeout', function($scope, $http, $rootScope, $timeout) { 
       $scope.tags = [];

MES HTML CHANGEMENTS:

<div class="container-fluid" > 
         <p>some junk</p> 
         <tags-input ng-model="tags" > 
           <!--<auto-complete source="loadTags($query)"></auto-complete> --> 
         </tags-input> 
       </div>

de ma compréhension, il doit montrer atleast la boîte d'étiquette, mais il ne montre pas.

MES QUESTIONS:

1. Am i missing something ? 
    2. What are the things one should check when doing these kinda work (i am a newbie to UX)

Source

2017-09-06 Abu Tahir

Y a-t-il des erreurs dans la console de développement? –

non je ne vois aucune erreur dans la console –

@AbuTahir plese post json vous obtenez de ''http: //localhost/search.php? Term =' + requête' –

Pour ng-tags-entrée dont vous avez besoin pour obtenir des données de serveur comme

{ text: 'Tag1' }, 
{ text: 'Tag2' }, 
{ text: 'Tag3' }

pour plus voir http://mbenford.github.io/ngTagsInput/demos

Source

2017-09-06 08:02:45

ici la saisie semi-automatique n'est pas un problème –

Assurez-vous que vous devez fournir display-property="name" ou tout ce que vous voulez montrer ou modèle HTML

HTML

<tags-input ng-model="tags" display-property="name" placeholder="Add a tag" replace-spaces-with-dashes="false" > 
<auto-complete source="loadTags($query)" 
     min-length="0" 
     load-on-focus="true" 
     load-on-empty="true"></auto-complete> 
</tags-input>

Je ne sais pas tous vos paramètres, mais cet exemple devrait fonctionner pour vous. S'il vous plaît lancer et comparer avec vos paramètres:

Demo in Plunker

[Modifier]

Si ce ne est pas question HTML, à la place:

$scope.loadTags = function(query) { 
    return $http.get('http://localhost/search.php?term='+query); 
};

changement:

$scope.loadTags = function($query) { 
    return $http.get('http://localhost/search.php?term='+query).then(function(response) { 
     return response.data; 
    }); 
    };

Source

2017-09-06 08:02:55

pour l'instant, passez la partie de saisie semi-automatique. Le fichier javascript semble être un problème pour moi. Comme vous le voyez ci-dessus les deux premiers JS, la partie HTML fonctionne bien.Lors de l'intégration dans une autre application angulaire, il ne fonctionne pas comme souhaité –

La structure elle-même ne montre pas –

@AbuTahir a mis à jour la réponse –

ng-tagsInput ne fonctionne pas

Répondre

Questions connexes