AngularJS, comment lier une variable à la concaténation de deux autres variables liées?

Je suis nouveau sur AngularJS et d'essayer de construire un AngularJS pratique de l'application, en ce qui permettra à l'utilisateur de concaténer une url à partir de plusieurs entrées, c'est à dire le protocole, de domaine, de chemin, param1, param2, param3... etc.

Et l'application va créer un lien vers l'url:

<a>{{protocol}}://{{domain}}{{path}}?{{param1}}&{{param2}}&{{param3}}</a>

Url ci-dessus est utilisée deux fois. Une fois sur l'attribut href, ainsi que le texte actuel. Maintenant ce que je veux faire, c'est quelque chose comme:

<a href="{{url}}">{{url}}</a>

Mais je ne suis pas sûr d'attribuer une url.
J'ai essayé ci-dessous, et il a travaillé, mais ne semble pas correcte.

<a href='{{url = protocol+"://"+domain+path+"?"+param1+"&"+param2+"&"+param3}}'>{{url}}</a>

En supposant que url est utilisée plusieurs fois dans l'application, où serait l'endroit le plus approprié pour attribuer url?

source d'informationauteur haejeong87 | 2013-08-12

  1. 23

    Vous ne devrait pas affecter la portée des variables dans la vue (le code HTML) - c'est uniquement pour la lecture.

    De faire une nouvelle variable à partir d'entrées, ajoutez une ng-modèle pour chacun d'eux, puis dans le contrôleur de définir une méthode qui fait un $portée de la variable:

    Votre formulaire HTML:

    <div ng-controller="MyCtrl">

    <input type="text" ng-model="urlParts.protocol">
    <input type="text" ng-model="urlParts.domain">
    <!-- etc -->
    <a ng-href="{{makeUrl()}}">{{makeUrl()}}</a>
</div>

    JS:

    function MyCtrl($scope) {
    $scope.urlParts = {};
    $scope.urlParts.protocol = ""; 
    $scope.urlParts.domain = ""; 
    //etc... 
    //These values will be updated when the user types in the input boxes

    $scope.makeUrl = function() {
      return $scope.urlParts.protocol + "://" + $scope.urlParts.domain + $scope.urlParts.path + "?" + $scope.urlParts.param1 + "&" + $scope.urlParts.param2 + "&" + $scope.urlParts.param3;
    }
}
  2. 1

    Une autre approche consiste à utiliser des ng-init directive visant à créer une dynamique de propriété qui représente la concaténation de tous ces biens. Vous pouvez appeler la fonction ou tout simplement concaténer en ligne.

     <a ng-init="urlParts.url=makeUrl()" 
ng-href="urlParts.url">{{urlParts.url}}
</a>

<a ng-init="urlParts.url=urlParts.protocol + '://' + $scope.urlParts.domain..." 
    ng-href="urlParts.url">{{urlParts.url}}
    </a>

    De référence:
    http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

    Essayer: http://plnkr.co/edit/PSvwCE?p=info

  3. 0

    Si vous voulez lier une url dynamique avec href ensuite, vous pouvez vous manipuler URL dans ng-click ou ng-mousedown de l'événement et de se lier à l'élément cible.

    JS:

    var goToLinkedPage = function (event, basePath, param1, param2, param 3) {
    var newState = basePath + "?" + param1 + "&" + param2 + "&" + param3;
    jQuery(event.target).attr('href',newState);
};

    HTML: 

    <a ng-mousedown="goToLinkedPage($event, basePath, param1, param2, param3)"> Click Here </a>