Question

我有一个下拉项目列表，我需要生成并选择一个使用angularjs，php和mysql存储在datatable中的项目。我已经有了一个代码来从数据表中检索项目并将其显示在网格中。我需要在网格中的下拉列表中显示所选项目。

HTML代码

 <table class="table table-bordered table-striped dataTable" id="grid" aria-describedby="grid_info" style="width: 1307px;">
 <thead>
   <tr role="row">
     <th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" style=" text-align:center">S.No<a ng-click="sort_by('{{rowRenderIndex+1}}');"></a></th>
           <th class="sorting_disabled">Employee<a ng-click="sort_by('empl_name');"></a></th>
           <th class="sorting_disabled">Work<a ng-click="sort_by('name');"></a></th>
           <th class="sorting_disabled center">Validate<a ng-click="sort_by('status');"></a></th>
           <th class="sorting_disabled center">Work Score<a ng-click="sort_by('task_score');"></i></a></th>
      </thead>
        <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
          <td class="sorting_disabled">{{rowRenderIndex+1}}</td>
          <td class="sorting_disabled">{{data.empl_name}}</td>
          <td class="sorting_disabled">{{data.work}}</td>
          <td class="center"><div align="center">
              <select name="">                  
                 <option>current</option> 
                 <option>Incomplete</option>  
                 <option>completed</option>
                 <option>Validated</option>
              </select></div></td>
         <td class="sorting_disabled">{{data.task_score}}</td>
         <td class="center"><div align="center"><input class="inp" type="text" id="{{data.employee}}" name="{{data.employee}}" onblur="" value="{{data.employee_score}}" /></div></td>
       </tr>
  </table>

app.js

var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
    return [];
   }
});
app.controller('workManagement', function ($scope, $http, $timeout) {
$http.get('workmanagement.php').success(function(data){`enter code here`
    $scope.list = data;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 5; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter  
    $scope.totalItems = $scope.list.length;
});


$scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
};
$scope.filter = function() {
    $timeout(function() { 
        $scope.filteredItems = $scope.filtered.length;
    }, 10);
};
$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
};

}）;

PHP代码

 include('config.php');

$con = mysqli_connect(APP_HOST,APP_USERNAME,APP_PASSWORD);
mysqli_select_db($con ,APP_DB);

$query="SELECT * FROM workmanagement";
//$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$result = mysqli_query($con ,$query);

$arr = array();
if(mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        $arr[] = $row;
    }
  }
  # JSON-encode the response
  $json_response = json_encode($arr);

  // # Return the response
  echo $json_response;

Answer 1

要将项目填充到下拉列表中，您需要做两件事：1）ng-model指令和2）ng-options指令。这是一个例子：

<select ng-model="myModel" ng-options="item.name for item in itemList" / >

其中itemList代表$ scope.itemList（可能是你真正称之为的任何东西）在你的控制器范围内。请注意，item.name（.name）的选择器部分取决于项目的属性。

如何使用angularjs，php和mysql动态生成和选择下拉项

1 个答案: