動的HTMLに角括弧を適用する

Question

私はAngularを初めて使用していますが、間違った方法で使用しようとしていますが、 私はこのコードを入力してURLを入力し、そのURLに移動します。

<div> 
    <input type="text" ng-model="url0"> 
    <a href="{{url0}}">goto</label> 
</div> 

クールなhref属性が入力と同期されるようになりました。 今、このdivを複製して、url0をurl1に置き換えます。しかし、新しいdivに拘束力のある仕事をする方法は？

Answer 1

DOM操作の考え方をやめてください。 DOMの操作は悪いです。 Angularは、DOM操作をできるだけ避けるように設計されています。

モデル内のオブジェクトと配列、およびこのモデルを表示するテンプレートについて考えてみましょう。

ので、例えば：

$scope.items = [ 
    { 
     url: 'foo'; 
    } 
]; 

$scope.addItem = function() { 
    $scope.items.push({ 
     url: ''; 
    }); 
}; 

、テンプレートに：角度を使用してDOMを操作

<div ng-repeat="item in items"> 
    <input type="text" ng-model="item.url"> 
    <a ng-href="{{item.url}}">goto</a> 
</div> 
<button ng-click="addItem()">Add an item</button> 

Answer 2

推奨されません。これは私がそれを行うだろうかです：

HTML：

<input id="url-input" type="text"/> 
<button id="go-button">GO</button> 

JS：

var input, 
    go_button, 
    url; 

input = document.getElementById("url-input"); 
go_button = document.getElementById("go-button"); 

go_button.addEventListener("click", function(){ 
    url = input.value; 
    window.location.href = url; 
});