如何使用http方法获取ng对话框angularjs中的数据?

时间:2017-05-31 09:15:37

标签: javascript html angularjs json ajax

使用php从数据库获取数据。数据很好。在NgModel框中没有显示对接数据。我在ngdialog函数中传递了scope参数。请帮帮我。



var adminapp = angular.module("uibootstrap", ["ngRoute", 'ngDialog']);
adminapp.controller("homedata", function($scope, $rootScope, $http, $httpParamSerializerJQLike, ngDialog, $timeout) {

  $rootScope.theme = 'ngdialog-theme-default';

  $scope.openDefault = function() {
    ngDialog.open({
      template: 'firstDialogId',
      className: 'ngdialog-theme-default',
      scope: $scope
    })
  };
  // get user
  $http.get('http://localhost/database/get-user.php').success(function(response) {
    $scope.users = response;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="item in users">
  <a href="javascript:void(0);" ng-click="openDefault()">
    <div class="img"><img alt="" src="admin/images/user-img2.jpg"> <span class="status-red"></span></div>
    <div class="msginfo">
      {{item.user_name}} <br> <span>{{item.user_status}}</span>
    </div>
  </a>
  <script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message">
      <div class="data">
        <div class="img">
          <img alt="" src="http://localhost/rockeditor/admin/images/img-user.png"> <a class="editbtn" href="#"><i class="fa fa-edit"></i></a>
        </div>
        <div class="name">{{item.user_name}}</div>
        <span class="editor">{{item.user_status}}</span>
        <span class="email">{{item.user_email}}</span>
        <input class="btn-green" type="submit" value="Save">
      </div>
    </div>
  </script>
</li>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

变量item在您的模板firstDialogId中不可用,实际上它不是<li></li>

的子节点

答案 1 :(得分:0)

您忘了在您的HTML中添加controller

  • ng-controller="homedata"元素
  • 上使用<li> {li> item无法在script标记中访问 在$scope.users调用返回成功响应后,
  • $http可用

见这里

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="ngDialog.css" />
  <link rel="stylesheet" href="ngDialog-theme-default.css" />
  <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  <script src="ngDialog.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

</head>

<body ng-app="MyApp" ng-controller="homedata">


  <button ng-click="clickme()">Hello World</button>
  <script type="text/ng-template" id="firstDialogId">
    <div ng-repeat="user in users">
      <div>Current user:</div>
      <div>{{user.name}}</div>
    </div>
  </script>
</body>

</html>

<强>的script.js

// Code goes here
angular.module("MyApp", ['ngDialog'])
  .controller("homedata", homedata)

function Main($scope, ngDialog) {
  $scope.users = [
      {name: 'abc'},
      {name: 'xyz'}
    ];
  $scope.clickme = function() {
    ngDialog.open({
      template: 'firstDialogId',
      className: 'ngdialog-theme-default',
      scope: $scope
    });

  };
}

但根据您的控制器,有一个$http电话,在它回复之前,您在$scope.users中没有任何数据。因此,请确保在$http获得成功回复后,您只在对话框中获取数据