如何在angularjs中從數據庫mysql加載動態記錄？

 
Here i want to load database user in select box using angular & i am newly on angular platform for me please help!!

<div ng-app="myapp" ng-controller="myctrl" class="centered"> 
    <label>Select User</label> 
    <select ng-model="selectedItem" ng-options="item.name for item in list"> 
     <option value="">-- choose --</option> 
    </select> 
    <h2>Selected:</h2> 
     {{selectedItem.name}} 
</div> 
<script type="text/javascript"> 
var app=angular.module('myapp',[]); 
app.controller('myctrl', function($scope, $http) { 
$http({ 
    method : "GET", 
    url : "http://localhost/demo/angular/getdata.php" 
}).then(
function (response) { 
    $scope.list = response.data.records; 
}); 
}); 
</script>

如何在angularjs中從數據庫mysql加載動態記錄？

來源

2017-06-03 Reena Mori

我用角版2 –

輸出：{ 「記錄」：[{名稱：「瑞娜」}，{名稱：「迪亞」}，{名稱：「New」}，{Name：「New1」}，{Name：「Diya」}，{Name：「Sonali」 }，{Name：「Sonali」}，{Name：「Sonali」}，]}} –

在PHP中沒有返回參數，請使用「return $ outp」然後再試一次，並且其角度1不是使用角度2. –

<!DOCTYPE html> 
<html> 
<head> 
<title>Dynemic Select box</title> 
<!---load css--> 
<link href="css/style.css" type="text/css" rel="stylesheet"> 
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"> 
<!---load js--> 
<script src="js/jquery-2.1.4.min.js" type="text/Javascript" ></script> 
<script src="js/bootstrap.js" type="text/Javascript" ></script> 
<script src="js/angular.min.js" type="text/Javascript" ></script> 
</head> 
<body 
<?php 
    echo $header; 
    $userdata=$this->model_user->getuser(); 
    $userdata =json_encode($userdata); 
    ?> 
<div ng-app="myapp" ng-controller="myctrl" class="centered"> 
<label>Select User</label> 
<select ng-options="x.id as x.name for x in sample" ng-model="x.id" name="selectedItem" id="selectedItem"> 

    <h2>Selected:</h2> 
    {{selectedItem.name}} 
</div> 
<script type="text/javascript"> 
var app=angular.module('myapp',[]); 
app.controller('myctrl', function($scope) { 
$scope.sample=<?php echo $userdata;?>; 
}); 
</script> 
</body> 
</htnl>

來源

2017-06-08 06:36:22

工作正常的用戶名從數據庫加載 –

它完全依賴於後端。如果後端是RESTFull服務，那麼從服務器獲取數據並填寫表單非常容易。

順便說一句，從後端獲取數據獨立於編程語言。這裏是Java + Angularjs

https://spring.io/guides/gs/consuming-rest-angularjs/

一個例子，這是一個展示如何實現在PHP中的問題的REST API的例子：

https://www.leaseweb.com/labs/2015/10/creating-a-simple-rest-api-in-php/

來源

2017-06-03 07:01:57

錯誤的json如果你看到多餘的，最後一個對象後。在下面標記爲粗體，Name也應該像「Name」一樣。輸出：{「records」：[{Name：「Reena」}，{Name：「Diya」}，{Name：「New」}，{Name：「New1」}，{Name：「Diya」 }，{名稱：「索納莉」}，{名稱：「索納莉」}，{名稱：「索納莉」} ，]}

建議：

爲什麼你用cocatenate串形成JSON。你可以使用json_encode這個數組。

來源

2017-06-03 07:04:31

–

你做錯了，item.name在你的JSON你有item.Name重命名它。它會工作

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<body> 
 
<div ng-app="myapp" ng-controller="myctrl" class="centered"> 
 
    <label>Select User</label> 
 
    <select ng-model="selectedItem" ng-options="item.Name for item in list"> 
 
     <option value="">-- choose --</option> 
 
    </select> 
 
    <h2>Selected:</h2> 
 
     {{selectedItem.Name}} 
 
</div> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('myapp', []); 
 
     app.controller('myctrl', function($scope, $http) { 
 
      $scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]}; 
 
      $scope.list = $scope.list.records; 
 
      /* replace it with your request data 
 
      $http({ 
 
       method : "GET", 
 
       url : "http://localhost/demo/angular/getdata.php" 
 
      }).then(
 
      function (response) { 
 
       $scope.list = response.data.records; 
 
      }); 
 
      */ 
 
     }); 
 
    </script> 
 

 
</body> 
 
</html>

來源

2017-06-03 07:04:32

我使用ng-option而不是ng-repeat因爲ng-repeat指令爲數組中的每個項目重複一段HTML代碼，所以它可用於在下拉列表中創建選項，但ng-options指令尤其適用於用選項填充下拉列表。 –

沒有得到你需要的東西。你想加載選項嗎？ r塊？你的代碼有選項。所以你想要加載數據基於下拉選擇選擇？ –

我想要在您的JSON中加載選項 –

這是因爲你的JSON陣列使用Name和你的NG選項使用name。

更改您的PHP，因此它使用name而不是Name。

你的PHP代碼是真的創造你所需要的JSON字符串的好方法：

有一個叫json_encode功能將一個值轉換成JSON表示。

您可以使用stdClass保存您的信息，只需打開結構成JSON字符串：

$personArray = array(); 
while($r = mysqli_fetch_row($sel)) { 
    $person = new stdClasS(); 
    $person->name = $r[0]; 

    $personArray[] = $person; 
} 

$results = new stdClass(); 
$results->records = $personArray; 

echo json_encode($results); // {"records":[{"name":"Stephen"},{"name":"Jane"},{"name":"Sam"}]}

來源

2017-06-03 07:14:47 user2340824

我已經試過這個！ –

如果您導航到http：//localhost/demo/angular/getdata.php，您會看到什麼？另外，如果你只是使用{{list}}，你會看到你的json結果嗎？很難確定問題出在哪裏 – user2340824

我剛剛在代碼中發現了一個錯字。我已經更新了我的回答 – user2340824

希望這會幫助你。創建一個演示此：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo for select box, AngularJS</title> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 

</head> 
<body> 

     <div ng-app="myapp" ng-controller="myctrl" class="centered"> 
     <label>Select User</label> 
     <!-- use item.Name instead of item.name as per JSON structure --> 
     <select ng-model="selectedItem" ng-options="item.Name for item in list"> 
      <option value="">-- choose --</option> 
     </select> 
     <h2>Selected:</h2> 
     {{selectedItem.Name}} 
    </div> 
    <script type="text/javascript"> 
     var app = angular.module('myapp', []); 
     app.controller('myctrl', function($scope, $http) { 

      // Assuming you're getting list from API in below format as per your sample JSON provided in a comment 
      $scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]}; 

      // update list variable as your sample JSON has records field but in html you're using without it 
      $scope.list = $scope.list.records; 

      /* 
      $http({ 
       method : "GET", 
       url : "http://localhost/demo/angular/getdata.php" 
      }).then(function(response) { 
       $scope.list = response.data.records; 
      }); 
      */ 
     }); 
    </script> 

</body> 
</html>

Working Fiddle link here

來源

2017-06-03 07:56:01 Sandeep

我想要載入用戶名數據庫 –

@ReenaMori：你能清楚你在AJAX回調下（即在http http =>然後回調函數下）從數據庫中獲得什麼輸出（response.data.records）？ – Sandeep

輸出數組：[「Reena」，「Diya」，「New」，「New1」，「Diya」，「Sonali」，「Sonali」，「Sonal i」] –

如何在angularjs中從數據庫mysql加載動態記錄？

回答

相關問題