Question

我完成了保存部分。在下面的代码中，我将展示如何显示保存的数据以及如何在单击编辑按钮时编辑表单。

这是我的angularjs代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <script src="../<path_to_jquery>/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        var uri = '/api/vs';
        $(document).ready(function () {
            $.getJSON(uri)
            .done(function (data) {
                alert('got: ' + data);
            });

            $.ajax({
                url: '/api/vs/5',
                async: true,
                success: function (data) {
                    alert('seccess1');
                    var res = parseInt(data);
                    alert('got res=' + res);
                }
            });
        });
    </script>
</head>
<body>
....
</body>
</html>

这是我的HTML代码

String currActID = act.getId();

我已经显示了数据，但在编辑中如何在点击编辑时选中复选框

这就是我显示数据的方式

  var module=angular.module('myApp',[]);
 module.controller('myController',function($scope, $http){
 $scope.post.users = [];
  $scope.technology = [{
      id: 1,
      name: 'HTML'
      },
     {
      id: 2,
      name: 'PHP'
     },
     {
     id: 3,
     name: 'Jquery'
     },
    {
     id: 4,
     name: 'AJAX'
    },
    {
    id: 5,
    name: 'Angular JS'
    }];

 // This is the data I fetch and display in form when edit button is clicked

  $scope.editUser = function(user){
    $scope.empData = {
        id: user.id,
        firstname : user.firstname,
        lastname : user.lastname,
        email : user.email,
        mobile : user.mobile,
        city : user.city,
        address : user.address,
        experience : user.experience,
        designation : user.designation,
        //technology : user.technology,
        relocate : user.relocate,
        salary : user.salary
    };
    $scope.empData.technology=user.technology;
}
});

Answer 1

首先：如果您使用value，请不要使用ng-model。让角度处理它。

第二：你想做什么？如果您在单击复选框时尝试编辑名称，请添加另一个带有文本类型的输入，将其绑定到name并使用ng-disable启用它。

Answer 2

您正在传递ng-model="tech.selected"，但是从$scope.technology对象传递了selected个密钥。首先，您需要添加如下

 $scope.technology = [
    {
      id: 1,
      name: 'HTML',
      selected: false
    },
    {
      id: 2,
      name: 'PHP',
      selected: false
    },
    {
     id: 3,
     name: 'Jquery',
     selected: false
    },
    {
     id: 4,
     name: 'AJAX',
     selected: false
    },
    {
      id: 5,
      name: 'Angular JS',
      selected: false
    }];

现在，当您进入编辑页面时，您必须已经保存了数据，其中tech.selected的值对于所选复选框为真。当您使用ng-repeat迭代该数据时，它会显示为tech.selected = true

选中的复选框

因此假设您在编辑页面中有technology个对象

$scope.technology = [
        {
          id: 1,
          name: 'HTML',
          selected: true // This will appear checked
        },
        {
          id: 2,
          name: 'PHP',
          selected: false
        },
        {
         id: 3,
         name: 'Jquery',
         selected: true // This will appear checked
        },
        {
         id: 4,
         name: 'AJAX',
         selected: false
        },
        {
          id: 5,
          name: 'Angular JS',
          selected: true //This will aprear checked
        }
];

这个小提琴将更好地解释你http://jsfiddle.net/uf4c87t4/

如何在angularjs中保存，显示和编辑复选框

2 个答案: