Soy nuevo en AngularJS y tratando de construir una AngularJS la práctica de la aplicación, en el que el usuario va a concatenar una url de varias entradas, es decir, protocolo, dominio, ruta, param1, param2, param3… etc.

Y la aplicación creará un enlace a la url:

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

Url de arriba se utiliza dos veces. Una vez en el atributo href, así como el texto real. Ahora lo que quiero hacer es algo como:

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

Pero no estoy seguro de dónde asignar url.
Traté de abajo, y funcionó, pero no parece correcto.

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

Suponiendo que url muchas veces se utiliza en la aplicación, en el que sería el lugar más apropiado para asignar url?

trate de usar ng-init docs.angularjs.org/api/ng.directive:ngInit Además, puede que quieras usar ng-href lugar de href.
Hola, no se puede almacenar dentro de su ámbito de aplicación con $scope.url = concanated url; y entonces el usuario {{url}} dentro de su controlador?
Hola @askkirati, pero si hago eso, cuando el usuario cambia una de las variables, la url no se actualiza… $scope.url = concatenados url parecía que sólo suceden una vez durante la inicialización. Hice algo mal?
samething, ng-init sólo lo hace una vez…
de acuerdo, creo que la mejor solución es lo que @mikel siempre.

OriginalEl autor haejeong87 | 2013-08-12

4 Comentarios

  1. 23

    No debe asignar ámbito de las variables en la vista (HTML) – es sólo de lectura.

    Para hacer una nueva variable de entradas, añadir un ng-modelo para cada uno de ellos y, a continuación, en el controlador de definir un método que hace que $alcance variable a partir de ellos, por ejemplo,

    Su formulario 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;
        }
    }
    ¿Por qué has utilizado ng-href en lugar de regular href?
    Duh! eso es tan simple. Muchas gracias!
    sobre ng-href: docs.angularjs.org/api/ng.directive:ngHref

    OriginalEl autor mikel

  2. 2

    Otro enfoque similar es el uso de ng-init directiva para crear una propiedad dinámica que representa la concatenación de todas esas propiedades. Usted puede llamar a la función o concatenar sólo en línea.

     <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 referencia:
    http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

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

    OriginalEl autor ozkary

  3. 0

    Si desea enlazar una url dinámica con href a continuación, puedes manipular tu URL en ng-click o ng-mousedown evento y se unen al elemento de destino.

    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>

    OriginalEl autor Rubi saini

  4. 0

    Sólo tiene que utilizar esta expresión de enlace a la concatenación de dos o más variables del ámbito en HTML.

    {{UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName}}

    Si quieres hacer esto dentro de cualquier atributo, Sólo tiene que escribir así:

    <input type="text" ng-value="UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName">

    OriginalEl autor Bairu

Dejar respuesta

Please enter your comment!
Please enter your name here