AngularJS, jak powiązać zmienną do konkatenacji dwóch innych powiązanych zmiennych?

Jestem nowy angularjs i stara się zbudować aplikację praktyki angularjs, w którym użytkownik będzie łączyć adresu URL z wieloma wejściami, czyli protokół, domena, ścieżka, param1, param2, param3 ... itdAngularJS, jak powiązać zmienną do konkatenacji dwóch innych powiązanych zmiennych?

Aplikacja utworzy link do adresu URL:

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

Powyżej adres URL jest używany dwa razy. Raz w atrybucie href, a także w faktycznym tekście. Teraz chcę coś powiedzieć:

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

Ale nie jestem pewien, gdzie przypisać adres URL. Próbowałem poniżej i działało, ale nie wydaje się prawidłowe.

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

Zakładając, że url jest wykorzystywany wielokrotnie w aplikacji, gdzie byłoby najwłaściwszym miejscem do przypisywania url?

Źródło

2013-08-12 haejeong87

spróbować użyć 'ng-init' także http://docs.angularjs.org/api/ng.directive:ngInit, to polubisz Wanna użyj ng-href zamiast href. –

Witaj, nie możesz zapisać go w swoim zasięgu za pomocą $ scope.url = pytającego adresu URL; a następnie użytkownik {{url}} wewnątrz kontrolera? – Yalamber

Hi @askkirati, ale jeśli to zrobię, gdy użytkownik zmieni jedną ze zmiennych, adres url nie zostanie zaktualizowany ... $ scope.url = Łączny adres URL wydawał się zdarzyć tylko raz podczas init. Czy zrobiłem coś nie tak? – haejeong87

Nie należy przypisywać zmiennych zasięgu w widoku (HTML) - służy tylko do ich czytania.

Aby utworzyć nową zmienną z danych wejściowych, dodaj do każdego z nich model ng, a następnie w sterowniku zdefiniuj metodę, która tworzy z nich zmienną $ scope.

Formularz 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; 
    } 
}

Źródło

2013-08-12 09:56:53 mikel

Dlaczego użyłeś 'ng-href' zamiast zwykłego' href'? – Pavlo

Duh! to takie proste. Dziękuję bardzo! – haejeong87

@PavloMykhalov o ng-href: http://docs.angularjs.org/api/ng.directive:ngHref – haejeong87

Innym podobnym podejściem jest użycie dyrektywy ng-init, aby utworzyć właściwość dynamiczną, która reprezentuje połączeniem wszystkich tych właściwości. Możesz wywołać funkcję lub po prostu połączyć w linii.

<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>

referencyjny: http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

spróbować: http://plnkr.co/edit/PSvwCE?p=info

Źródło

2015-05-20 13:54:17 ozkary

Jeśli chcesz związać dynamiczny url href następnie można manipulować Ci adres URL w ng-click lub ng-mousedown imprezy i wiążą się kierować element.

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>

Źródło

2015-10-28 10:27:01

AngularJS, jak powiązać zmienną do konkatenacji dwóch innych powiązanych zmiennych?

Odpowiedz

Powiązane problemy