2013-12-13 1 views
1

У меня есть мнение, как это:Угловые нг-повтор с входом

<table class="table"> 
    <tr data-ng-repeat="exercise in exercises x"> 
     <td> 
      <input type="number" data-ng-model="?????????" /> 
     </td> 
     <td> 
      {{exercise.Name}} 
     </td> 
    </tr> 
    </table> 

Я задаюсь вопрос, что я должен поставить в data-ng-model, так что я могу использовать двухстороннюю привязку данных т.е. значения на входе, на моем контроллер?

Я пробовал data-ng-model="{{exercise.Name}}", но это привело к ошибкам.

Также, как я могу ссылаться на определенный вход в контроллер? Могу ли я сделать что-то вроде этого: $scope.InputOne = ...

+0

я был далеко от компьютера;) – hyperN

ответ

2

для использования ng-модели с двусторонним связыванием и одностороннего связывания с использованием ng-bind или {{}} скобок.

Этот example демонстрирует использование двух способов и способа получения информации об объекте.

пс: контроллер не должен «видеть» вид напрямую.

<body data-ng-app="app"> 
<div data-ng-controller="TestCtrl"> 
    <table> 
    <tbody> 
     <tr data-ng-repeat="exercise in exercises"> 
     <td> 
      <input type="number" data-ng-model="exercise.Name" /> 
     </td> 
     <td data-ng-bind="exercise.Name"></td> 
     <td><button data-ng-click="getInformation($index)">Get information</button></td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> 

var app = angular.module('app', []); 

app.controller('TestCtrl', function($scope) { 

$scope.exercises = [{Name:1}, 
        {Name:2}, 
        {Name:3}, 
        {Name:4} 
]; 

$scope.getInformation = function(index) { 
    alert($scope.exercises[index].Name); 
}   
}); 
+0

Благодарим вас за подробный ответ! – hyperN

5

Используйте data-ng-model="exercise.Name" без скобок {{}}.

Предлагаю начать с angular tutorial.

+0

Спасибо, пожалуйста, вы можете сказать мне, как я могу получить данные для конкретного входа в контроллере? – hyperN

+0

см. [Шаг 10] (http://docs.angularjs.org/tutorial/step_10) указанного учебника – PixnBits

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