2016-04-28 10 views
0

私の言語スキルには申し訳ありませんが、すべてを理解していただければ幸いです。Angularjs:ng-repeat要素の入力

入力データをhttp投稿に渡すために、ng-repeat要素の入力を行う必要があります。たとえば :私は入力を行うすべての要素の4つの要素を持っている、とFE:

.panel-body.note-link ng-repeat=("meal in mealsList track by $index") 
        a data-toggle="tab" 
         h4.pull-right.text-muted 
         | {{meal.price}} zł 

        h4.text-success 
         i.fa.fa-close.text-danger<> ng-click="removeMeal($index)" style="cursor: pointer;font-size: 15px;" 
         | {{meal.name}} {{$index}} 
         input.form-control type="number" ng-model="example" 
         | {{example}} 

と私はコントローラに入力されたデータを渡す方法を、知らない:

elem1- input: 1 
elem2- input: 4 
elem3- input: 1 
elem4- input: 2 

ここでは私のコードがあります。 ヒントやトリックですか?

答えて

1
angular.module('yourModule').controller('viewController', function($scope) { 
    $scope.mealList = [...]; 
    $scope.example; //The input data will automatically bind to this variable. 
}); 

、その後、次の操作を行います。

input.form-control type="number" ng-model="meal.example" 

をそして食事オブジェクトのプロパティ値は、入力に結合する

+0

だから、今、私は何をすべきか、私はの "例" の入力を参照してくださいしたい場合は、のために例、最初の食事オブジェクト? –

+0

「食事」オブジェクトに添付します。 すべての食事を表示すると、すべての食事は "example"プロパティにバインドされた独自の "example"入力を持ちます –

0

ngModelディレクティブに添付してください。あなたの食事のオブジェクト内のデータを変更するために、入力したい場合は

<div ng-repeat="item in array"> 
    {{ item.output }} 

    <input ng-model="item.output" /> 
</div> 
1

mealList配列を繰り返し、入力を追加します。

例:https://jsfiddle.net/ptzhL0uL/

コントローラ

function Controller1($scope) { 
    var vm = this; 

    vm.items_saved = false; 
    vm.mealList = [{ 
    price: '2.99', 
    name: 'Pizza' 
    }, { 
    price: '1.99', 
    name: 'Chips' 
    }, { 
    price: '4.99', 
    name: 'Beer' 
    }]; 

    vm.addNewItem = addNewItem; 
    vm.saveItems = saveItems; 

    function addNewItem() { 
    vm.mealList.push({}); 
    } 

    function saveItems() { 
    vm.items_saved = true; 
    } 
} 

HTML

<button ng-click="ctrl.addNewItem()" class="btn btn-default">Add Item</button> 
<div ng-repeat="item in ctrl.mealList"> 
    <input type="text" ng-model="item.name"> 
    <input type="text" ng-model="item.price"> 
    <input type="number" ng-model="item.quantity"> 
</div> 
<button ng-click="ctrl.saveItems()" class="btn btn-primary">Save</button> 
<hr> 
<div ng-if="ctrl.items_saved"> 
    <h4>Here is your meal list:</h4> 
    <ul> 
    <li ng-repeat="item in ctrl.mealList">{{item.quantity}}{{item.name}} at ${{item.price}} each</li> 
    </ul> 
</div>