填写模态窗口表单

时间:2015-08-31 11:32:17

标签: javascript angularjs

我在填充模态窗口表单时遇到问题。例如,我点击网格行来编辑用户,我调用ajax,它返回用户的特定数据。

当前代码:

 <modal title="Uredi uporabnika" visible="showModal">
        <form role="form">
          <div class="form-group">
            <label for="user_name">Ime</label>
            <input type="text" class="form-control" id="user_name" />
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
 </modal>

控制器:

$scope.openUserEditor = function(selected_user_id){
    $http({
        method:'POST',
        url:ajax,
        dataType: 'json',
        headers: {
            'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        data:{
            action:'loadUserData',
            id:selected_user_id
        }
    }).success(function(data,status){
            $scope.userInfo = data.user_info;
            $scope.showModal = !$scope.showModal;
    });
}

模态窗口代码:

app.directive('modal', function(){
  return {
  template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title}}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;

    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
    });
  }
};
});

即使我正在以正确的方式进行,我也会提供任何帮助,因为我是Angular的新人。

2 个答案:

答案 0 :(得分:0)

使用输入ID填充值:

$("#user_name").val(data.user_info);

答案 1 :(得分:0)

好的,我在数以百万计的不同尝试之后找到了解决办法,我只是把手放在我头上。

<input type="text" class="form-control" id="user_name" value="{{userInfo.u_name}}" />

所以我必须添加userInfo对象并调用该参数u_name。

无论如何,请向Shivi寻求帮助:D