【问题标题】:Angularjs ng-model not filling from jsonAngularjs ng-model 没有从 json 填充
【发布时间】:2017-12-19 22:17:47
【问题描述】:

我从 Angular 服务获取的 JSON 数据未填充 ng-model。我尝试将数据放入警报框中,例如alert(data.Usr_UserId),但它在警报框中显示undefined。下面是我的代码。

1) 控制器

app.controller("myCtrl", function ($scope, myService, $mdDialog) {

GetAllEmployee();
//To Get All Records  
function GetAllEmployee() {
    var result = myService.getEmployees();
    result.then(function (data) {
        $scope.userlist = data.data;
    });
}
GetUserTypeList();
//To Get All Records  
function GetUserTypeList() {
    var result = myService.getUserType();
    result.then(function (data) {
        $scope.usertype = data.data;
    });
}
$scope.clickevent = function(user, item) {
    if (item.opType == 1) {
        edit();
        ListEmp(user);
    } else {
        deleteEmp(user);
    }
}    
function deleteEmp(user) {
    var getData = myService.DeleteEmp(user.Usr_Id);
    getData.then(function(msg) {
      alert('Employee Deleted');
        GetAllEmployee();
    }, function() {
        alert('Error in Deleting bbb');
    });
}  
function ListEmp(user) {
    var resultset = myService.getEmp(user.Usr_Id);
    resultset.then(function(data) {
        alert(data.Usr_UserFName);
        $scope.add_user.UserId = data.Usr_UserId;
        $scope.add_user.FirstName = data.Usr_UserFName;
        $scope.add_user.LastName = data.Usr_UserLName;
        $scope.add_user.phone = data.Usr_PhoneNum;
        $scope.add_user.UserType = data.Usr_Type;
        $scope.add_user.Password = data.Usr_Passowrd;
    });
}
$scope.AddUser = function (add_user) {
    var getData = myService.AddEmp(add_user.Usr_UserId, add_user.Usr_Passowrd, add_user.Usr_UserFName, add_user.Usr_UserLName, add_user.Usr_Type, add_user.Usr_PhoneNum);
    window.location.href = '/Home/UserList';
    GetAllEmployee();       
}})
.controller('WidthDemoCtrl', function ($mdDialog) {
var vm = this;

this.announceClick = function (index) {
    $mdDialog.show({
        controller: DialogCtrl,
        controllerAs: 'ctrl',
        templateUrl: '/Home/About',
        parent: angular.element(document.body),
        targetEvent: $event,
        clickOutsideToClose: true
    })
};})

2) 服务.js

app.service("myService", function($http) {
  //get All Users
  this.getEmployees = function() {
    return $http.get("/Home/GetAllUsers");
  };
  this.getEmp = function(employeeId) {
    var response = $http({
      method: "post",
      url: "/Home/GetUserById",
      data: JSON.stringify({
        Userid: employeeId
      })
    });
    return response;
  }
  this.DeleteEmp = function(employeeId) {
    var response = $http({
      method: "post",
      url: "/Home/DeleteUser",
      data: JSON.stringify({
        User: employeeId
      })
    });
    return response;
  }
  this.AddEmp = function(userid, password, fname, lname, type, phone) {
    var response = $http({
      method: "post",
      url: "/Home/AddNewUser",
      data: JSON.stringify({
        UserId: userid,
        UserPassword: password,
        UserFName: fname,
        UserLName: lname,
        UserType: type,
        UserPhoneNumber: phone
      })
    });
    return response;
  }
  this.getUserType = function() {
    return $http.get("/Home/GetUserType");
  };
})

3) CSHTML

<div ng-controller="myCtrl" layout="column" ng-cloak class="md-inline-form">
   <md-content layout-padding>
      <div>
         <form name="userForm">
            <div layout-gt-xs="row">
            </div>
            <div layout-gt-sm="row">
               <md-input-container class="md-block" flex-gt-sm>
                  <label>User Id</label>
                  <input ng-model="add_user.UserId"  ng-required="true">
               </md-input-container>
               <md-input-container class="md-block" flex-gt-sm>
                  <label>Password</label>
                  <input ng-model="add_user.Password" type="password" ng-required="true">
               </md-input-container>
            </div>
            <div layout-gt-sm="row">
               <md-input-container class="md-block" flex-gt-sm>
                  <label>First Name</label>
                  <input ng-model="add_user.FirstName"  ng-required="true">
               </md-input-container>
               <md-input-container class="md-block" flex-gt-sm>
                  <label>Last Name</label>
                  <input ng-model="add_user.LastName"  ng-required="true">
               </md-input-container>
            </div>
            <div layout-gt-sm="row">
               <md-input-container class="md-block" flex-gt-sm>
                  <label>Phone</label>
                  <input ng-model="add_user.phone"  ng-required="true">
               </md-input-container>
               <md-input-container class="md-block" flex-gt-sm>
                  <label>User Type</label>
                  <md-select ng-model="add_user.UserType"  ng-required="true">
                     <md-option ng-repeat="type in usertype" value="{{type.Ut_int}}">
                        {{type.Ut_Name}}
                     </md-option>
                  </md-select>
               </md-input-container>
            </div>
            <div>
               <md-button ng-click="AddUser(add_user)" type="submit" class="md-raised md-primary">Submit</md-button>
            </div>
         </form>
      </div>
   </md-content>
</div>
<pq-grid options=""></pq-grid>

【问题讨论】:

  • add_user 是我在 cshtml 中的 ng-model。 Alos,我签入了 broser,我正在获取 json 数据,但我无法使用它。缺少一些东西。
  • 我没有看到你试图用数据提醒哪里。你能把它放到代码中,然后评论你出错的地方吗?
  • 是的,正如布赖恩所说,如果你调用失败的 alert() 会更好。您有可能在“then()”之外甚至在之后使用它,这将不起作用
  • 我用 alert int 更新了我的代码。但我在 alert 中变得未定义。
  • 有人可以帮忙吗?

标签: javascript angularjs json


【解决方案1】:

检查您的 json 属性从服务返回的以下属性 Usr_UserId Usr_UserFName Usr_UserLName Usr_PhoneNum 用户类型 用户密码

【讨论】:

  • 我检查浏览器 json 并返回一切正确。
  • 问题是当我点击编辑时我的 $mddialog 没有填充所有元素。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-30
相关资源
最近更新 更多