11

私はAngularJSを初めて使用し、ユーザーが複数の入力、つまりプロトコル、ドメイン、パス、param1、param2、param3などからURLを連結するAngularJS練習アプリを構築しようとしています.

アプリは次の URL へのリンクを作成します。

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

上記の URL は 2 回使用されています。href 属性と実際のテキストに一度。今私がやりたいことは次のようなものです：

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

しかし、URLをどこに割り当てるかわかりません。以下で試してみましたが、うまくいきましたが、正しくないようです。

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

がアプリで何度も使用されると仮定するとurl、どこに割り当てるのが最も適切urlでしょうか?

4

4 に答える 4

24

ビュー (HTML) でスコープ変数を割り当てる必要はありません。これは、それらを読み取るためだけのものです。

入力から新しい変数を作成するには、それぞれに ng-model を追加し、コントローラーでそれらから $scope 変数を作成するメソッドを定義します。

あなたの 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;
    }
}
于 2013-08-12T09:56:53.633 に答える
0

If you want to bind a dynamic url with href then you can manipulate you URL in ng-click or ng-mousedown event and bind to target 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>
于 2015-10-28T10:27:01.063 に答える
0

このバインディング式を使用して、HTML で 3 つ以上のスコープ変数を連結します。

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

任意の属性内でこれを行いたい場合は、次のように記述します。

<input type="text" ng-value="UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName">
于 2018-08-27T12:20:02.823 に答える