2016-06-24 3 views
1

Я изучаю углы и пытаюсь реализовать динамическое связывание на моей тестовой странице. Моя цель состояла в том, чтобы реализовать поля ввода, каждый из которых привязан к одному из динамически полученных имен переменных.Угловое связывание с унаследованными переменными области видимости

Если я не буду объявлять массив результатов в корневой области - он создаст массив результатов для каждого повторения, и под каждым полем я увижу его собственное содержимое результатов.

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

Вот мой пример:

HTML:

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="index.js"></script> 
<body ng-app="app" ng-controller="main" > <!--ng-init="results = [{'TEST': 1}]" --> 

<div> 
    <p>Name: <input type="text" ng-model="name"></p> 
    <p ng-bind="name"></p> 
    <input type="button" value="Clickme" ng-click="clickfnc()"> 
    <input type="button" value="Dump" ng-click="dump()"> 
    <input type="button" value="Pop" ng-click="remove()"> 
</div> 

<div ng-repeat="x in params"> 
    <p>Name: <input type="text" ng-model="results[x.name]"></p> 
    <p ng-bind="results[x.name]"></p> 
    <p>{{x.name}}</p> 
    <p>{{results}}</p> 
    <p>{{params}}</p> 
</div> 

<hr> 

<p ng-bind="results"></p> 

<hr> 

</body> 
</html> 

index.js:

var app = angular.module('app', []); 
app.controller('main', function ($scope) 
{ 
    $scope.clickfnc = function() 
    { 
     console.log('click'); 

     $scope.params = [ 
      { 
       name: 'ACCOUNT' 
      }, 
      { 
       name: 'AMOUNT' 
      } 
     ]; 
    }; 

    $scope.dump = function() 
    { 
     console.log($scope.results) 
    }; 

    $scope.remove = function() 
    { 
     $scope.params.pop(); 
    } 
}); 

ответ

1

Если я правильно понял, что это ваша цель, причина вам не удалось, что созданный вами results массив, но вы должны создать объект.
Здесь: <p>Name: <input type="text" ng-model="results[x.name]"></p>
Вы назначаете новые свойства для результатов, поэтому это должен быть объект. Вы можете проверить эту скрипку - https://jsfiddle.net/kb5udcac/

+0

Спасибо! Моя ошибка будет выглядеть лучше, прежде чем спрашивать в следующий раз. – user3177112

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