angularjs-データベースから動的に作成されたテキストエリアにデータをロード

私は動的に生成される10のテキストエリアを持っています。テキストのようなユーザーがテキストエリアを追加または削除することができます。データベースからデータを取得しようとしていますが、問題なく表示されています。angularjs-データベースから動的に作成されたテキストエリアにデータをロード

ここにコードがあります。

<fieldset data-ng-repeat="choice in choices"> 
    <div class="col-xs-12"> 
     <div class="row"> 
      <div class="col-xs-10"> 
       <textarea name="{{choice.name}}" ng-model="choice.name" class="form-control textbox1" id="exp_details" placeholder="Experience" required="required" rows="3"></textarea> 
      </div> 
      <div class="col-xs-2"> 
       <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
      </div> 

     </fieldset>

httpリクエストです。

formApp.controller('getprofile', function($scope,$http){ 
    $http({ 
     url: 'get_profile.php', 
     method: "GET", 
     params: {uid: uid} 
    }) 
    .success(function(data) { 

     if (data.success) { 

      Need help over here 


     }else{ 
      alert('Error'); 
     } 
    }); 
})

この問題を解決する方法を教えてください。

httpリクエストからのデータはこのようです。

exp = 'some text'; 
exp1 = 'some text'; 
exp2 = 'some text'; 
-------------------- 
exp10 = 'some text';

編集

http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically

私は、上記のリンクからコードを使用してテキストエリアに既存の値を追加しようとしています。

出典

2017-02-02 Ironic

あなたのHTMLは、不正な形式です。 '$ http'約束の' success'コールバックも削除されました – Phil

'choices'配列はどのように見えますか？それはajaxコールから生まれていますか？ – Developer

**正確に**どのようなレスポンスデータが表示されますか？なぜ成功したのですか？あなたの答えは – Phil

あなたchoicesとdataは、このようなオブジェクトを何かで配列されている場合は、

$scope.choices = [ 
    { id: 1, name: ""}, 
    { id: 2, name: ""}, 
    { id: 3, name: ""}, 
    { id: 4, name: ""} 
    ] 

    $scope.data = [ 
    { exp0: " 1 text for choice 1"}, 
    { exp1: " 2 text for choice 2"}, 
    { exp2: " 3 text for choice 3"}, 
    { exp3: " 4 text for choice 4"}, 
    ]

次に、あなたのソリューションをすることができ、

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope,$http) { 
 
    $scope.choices = [ 
 
    { id: 1, name: ""}, 
 
    { id: 2, name: ""}, 
 
    { id: 3, name: ""}, 
 
    { id: 4, name: ""} 
 
    ] 
 
    
 
    // this code come in success method 
 
    
 
    $scope.data = [ 
 
    { exp0: " 1 text for choice 1"}, 
 
    { exp1: " 2 text for choice 2"}, 
 
    { exp2: " 3 text for choice 3"}, 
 
    { exp3: " 4 text for choice 4"}, 
 
    ] 
 
    
 
    $scope.data.forEach(function (value, i) { 
 
    $scope.choices[i].name = value['exp'+i] 
 
    console.log(i.toString()); 
 
    console.log($scope.choices[i].name) 
 
    }); 
 
    
 
    // this code come in success method 
 
    
 
    
 
    
 
    $http({ 
 
     url: 'get_profile.php', 
 
     method: "GET", 
 
     params: {uid: 'uid'} 
 
    }) 
 
    .success(function(data) { 
 

 
     if (data.success) { 
 

 
      // above code comes here 
 

 

 
     }else{ 
 
      alert('Error'); 
 
     } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<fieldset data-ng-repeat="choice in choices"> 
 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 
      <div class="col-xs-10"> 
 
       <textarea name="{{choice.name}}" ng-model="choice.name" class="form-control textbox1" id="exp_details" placeholder="Experience" required="required" rows="3"></textarea> 
 
      </div> 
 
      <!--<div class="col-xs-2"> 
 
       <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
 
      </div>--> 
 

 
</fieldset> 
 

 

 

 
</body> 
 
</html>

上記のスニペットを実行してください。

HERE IS THE WORKING DEMO

出典

2017-02-02 05:24:29 Sravan

ありがとう。私が試してみましょう。 – Ironic

@CalculatingMachine、試してみましたか？ – Sravan

angularjs-データベースから動的に作成されたテキストエリアにデータをロード

答えて

関連する問題