Установка значения модели Angularjs ng с помощью Javascript

Я рассмотрел много ответов/вопросов на этом сайте, и ни один из них не касается моей проблемы. Если я ошибаюсь, прошу прощения.Установка значения модели Angularjs ng с помощью Javascript

Вот ссылка на мой пример, так что вы можете увидеть мой код и его поведение: Sample Code

Рассмотрим два объекта:

items = { 
    a: "apple", 
    b: "banana" 
}; 

lines = [ 
    {key: "a"}, 
    {key: "b"}, 
    {key: "b"}, 
    {key: "a"} 
];

отобразить их следующим образом:

<div ng-repeat="line in lines"> 
    <div ng-click="clicked(items[line.key])"> 
     {{items[line.key]}} 
    </div> 
</div>

Обратите внимание, что «строки» содержат повторяющиеся значения, а элементы - это набор (уникальных элементов).

В приложении, которое я создаю, когда пользователь нажимает на одну из строк, мне нужно указать поле ввода, которое будет обновлять элемент, на который указывает клавиша строки. И мне нужна двусторонняя привязка, чтобы изменения через вход автоматически отражались по всем линиям.

В моей выборке (см ссылку выше), я добавил два входных метки:

Input 1: <input ng-model="items.a"> 
Input 2: <input ng-model="mymodel">

вход №1 наборы нг-модель с использованием прямой ссылки на элементы. Ввод №2 задает значение ng-модели с использованием переменной, существующей в пределах $ scope.

<div ng-click="clicked(items[line.key])">

Значение MyModel изменяется, когда пользователь нажимает на выходе DIV (линии) через нг-повтора.

Вход 1 работает должным образом. Изменения, внесенные через вход, автоматически отражаются во всех сгенерированных div.

Ввод 2 представляет то, что я пытаюсь выполнить: динамическое связывание ng-модели во входном элементе с той же моделью в строке div, на которую пользователь нажал. В приведенном ниже примере правильный текст отображается на входе, но между ним и двумя линиями, имеющими один и тот же ключ, нет двусторонней привязки.

Вот мой полный сценарий:

var myApp = angular.module("myApp",[]); 

myApp.controller("mainCtrl", function ($scope) { 
    $scope.items = { 
     a: "apple", 
     b: "banana" 
    }; 
    $scope.lines = [ 
     {key: "a"}, 
     {key: "b"}, 
     {key: "b"}, 
     {key: "a"} 
    ]; 
    $scope.mymodel = $scope.items.a; 

    $scope.clicked = function(key) { 
     $scope.mymodel = key; 
    }; 
});

А вот мой index.html:

<!DOCTYPE html> 
<html> 
    <body ng-app="myApp" ng-controller="mainCtrl"> 
    Input 1: <input ng-model="items.a"> 
    Input 2: <input ng-model="mymodel"> 
    <div ng-repeat="line in lines"> 
     <div ng-click="clicked(items[line.key])">{{items[line.key]}}</div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
    <script src="script.js"></script> 
</body>

Заранее спасибо за помощь!

источник

2014-05-08 user1519054

Уважайте [точка правила] (https://www.google.com/#q=angularjs+dot+rule) и использовать объект, а не примитивный в '$ scope.mymodel'. – Blackhole

Знаете ли вы, что ng-repeat создает новую изоляционную область для каждой итерации? – mortsahl

Мне это известно, но я ищу решение для моего варианта использования. Какое решение вы бы предложили? – user1519054

Вот как я это сделаю. Просто введите переменную mymodel в значение «ключ» и привяжите ее к вводу через этот ключ. Plunker

$scope.clicked = function(key) { 
    $scope.mymodel = key; 
};

и переключиться на ваш HTML для этого.

Input 1: <input ng-model="items.a"> 
Input 2: <input ng-model="items[mymodel]"> 
<div ng-repeat="line in lines"> 
    <div ng-click="clicked(line.key)">{{items[line.key]}}</div> 
</div>

источник

2014-05-08 22:45:58

Да ... это то, чего я пытался достичь. Благодаря! – user1519054

@ user1519054, Право на человека. Удачи! Примите ответ, если вы удовлетворены. –

Установка значения модели Angularjs ng с помощью Javascript

ответ

Смежные вопросы