Применить угловую привязку к динамическому HTML

Question

Применить угловую привязку к динамическому HTML

0

Я новичок в Angular и, возможно, пытаюсь использовать его некорректно, но.. У меня есть этот код - ввод для ввода URL-адреса и ссылки для перехода к этому URL-адресу.

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

Класс cool, href теперь синхронизирован с вводом. Теперь я хочу клонировать этот div, заменяя url0 на url1. Но как сделать обязательную работу над новым div?

ukrbublik 18 апр. 2016, в 18:41

Источник

0

Добро пожаловать в ТАК. Вам нужно будет приложить усилия и задать более конкретный вопрос, связанный с вашей попыткой. Я бы посмотрел в ngRepeat и $index .
isherwood 18 апр. 2016, в 16:08

Теги:

angularjs

2 ответа

0

Манипулирование DOM с помощью углового не рекомендуется. Вот как я это сделаю:

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

helfi 18 апр. 2016, в 15:33

Ещё вопросы

Добро пожаловать в ТАК. Вам нужно будет приложить усилия и задать более конкретный вопрос, связанный с вашей попыткой. Я бы посмотрел в ngRepeat и $index .

JB Nizet · Accepted Answer · 2016-04-18T14-21-00.000Z

Прекратите думать с точки зрения манипуляций с DOM. DOM-манипуляция - это зло. Угловая конструкция позволяет максимально избегать манипуляций с DOM.

Подумайте об объектах и массивах в модели и шаблоне, который отображает эту модель.

Так, например:

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

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

И в шаблоне:

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