ビューの動的テキストボックスからAngularJSコントローラにデータを送信

Question

ドロップダウンリストがあり、ドロップダウンリストからオプションを選択すると、選択ごとにテキストボックスが表示されます。 HTML-

<select id="nut"> 
         <option>---select---</option> 
         <option value="N1">N1</option> 
         <option value="N2">N2</option> 
         <option value="N3">N3</option> 
         <option value="N4">N4</option> 
</select> 
<div id="holder"></div> 
<input type="submit" value="save" ng-click="savedata()"/> 

Javascript-

$("#nut").change(function() { 
    val = $(this).val(); 
    var ctr = '<input type="text" name="' + val + '"/>'; 
    $('#holder').append(ctr); 
}); 

今私は、保存ボタンをクリックすると上のAngularJSのコントローラを使用して、データベースに新しい行のすべてのこれらのテキストボックスの値を挿入します。

通常のフォーム要素に対して、data-ng-modelを使用してフォーム要素データをバインドする方法でこれを行う方法を知っています。しかし、これを達成する方法はないとき。フォーム要素の数は可変である。私はこれをやってみました

は、

var ctr = '<input type="text" name="data.' + val + '" data-ng-model="data.' + val + '"/>'; 

<input type="submit" data-ng-click="savedata(data)"/> 

AngularJSは

.controller('testController', function ($scope, $http, $location) { 
     $scope.savedata = function (data) { 
     debugger; 
     alert($scope.data); 
     } 
}) 

controller-しかし、これは未定義のデータの値を与えます。 他に何ができますか？

Answer 1

AngularJSのデータ駆動型アプローチを使用し、jQueryアプローチから問題に移行する。以下の解決策に従うことができます。

最初に問題を見てみましょう。

1. 表示するラベル/タグのリストがあります。選択メニューからのオプションが2回
2. を選択されていない場合
3. は、ユーザーが入力したテキストが選択オプションで、ユーザが選択したタグ/ラベルに関連付けする必要があります
4. テキスト入力フィールドが示されるべきではなく、ユーザはラベルを選択して対応するタグを入力し、サブミットを押す。データをバックエンド/データベースに保存する必要があります。

これでクリーンなソリューションを作成しましょう。

まず、コントローラでこの作業を行い、必要な変数とモデルを設定します。

angular.controller('testController',['$scope','$http','$location',function($scope,$http,$location){ 

    $scope.optionsList = ['N1','N2','N3','N4','N5']; //List of options to be displayed in select 
    $scope.selectedOption = 'Select Tags'; //Variable to store the selected option  
    $scope.textFilled = ''; //this model will store the text entered by the user 
    $scope.showTextField = false;// this model will decide when to show the text-field 

    $scope.switchTextFieldStates = function(){ 
     if($scope.selectOptions != 'Select Tags'){ 
     $scope.showTextFields = true; 
     }else { 
     $scope.showTextFields = false; 
     } 
     $scope.textFilled = ''; //This will ensure that if user changes the option then previously filled data is cleared out of the model 
    } 

    $scope.saveData = function(){ 

     console.log($scope.selectedOption,$scope.textFilled); 
//Do whatever you want to do here with the data you got 
//Reset the state of the view 
     $scope.showTextFields = false; 
     $scope.textFillled = ''; 
     $scope.selectedOptions = 'Select Tags'; 
} 

}]; 

問題に対して適切なHTMLテンプレートを作成できます。

<select ng-options="item as item in optionsList" ng-model="selectedOption" ng-change="switchTextFieldStates()"></select> 

<div id="holder" ng-show="showTextFields"><input type="text" ng-model="textFilled"/></div> 
<input type="submit" ng-click="saveData()"/>