Question

我想隐藏_id使用ng-model在UI上显示，我看到很多使用ng-repeat过滤数据的示例但是我没有找到使用ng-model实现此任务的角度解决方案。如何隐藏_id属性以显示？

main.html中

<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" ></div>

Ctrl.js

$scope.obj.data = {
    "_id": "58a3322bac70c63254ba2a9c",
    "name": "MailClass",
    "id": "MailTask_1",
    "createdBy": "tyuru",
    "__v": 0,
    "properties": [{
        "label": "Java Package Name",
        "type": "String",
        "editable": true,
        "binding": {
            "type": "property",
            "name": "camunda:class"
        },
        "$$hashKey": "object:29"
    }],
    "appliesTo": [
        "bpmn:ServiceTask"
    ]
}

var json = {};

function loadCurrentUserAndTemplate() {
    AuthService.getCurrentUser()
        .then(function(resp) {
            $scope.currentUser = resp.data.id;
            // console.log($scope.currentUser);
            userTemplate($scope.currentUser);
        });
}

loadCurrentUserAndTemplate();

$scope.obj = {
    data: json,
    options: {
        mode: 'tree'
    }
};

var privateFields = removePrivateFields($scope.obj.data, ['_id', '__v']);

// add private fields back to $scope.obj.data before POST
var modifiedData = Object.assign({}, $scope.obj.data, privateFields);


function removePrivateFields(obj, props) {
    var output = {};
    props.forEach(function(prop) {
        if (obj.hasOwnProperty(prop)) {
            output[prop] = obj[prop];
            delete obj[prop];
        }
    });
    return output;
}

function userTemplate(user) {
    // console.log('inside template',$scope.currentUser);
    templateService.getUserTemplates(user)
        .then(function(response) {
                // console.log('userTemplate',response.data);
                // console.log(response.data.length);
                $scope.displayedTemplates = response.data;
                if (response.data.length !== 0 && response.data !== null) {
                    $scope.obj.data = response.data[0];

                }
            }

Answer 1

你可以创建一个像removePrivateFields这样的函数来从原始对象中剥离私有字段，并在提交给服务器之前将它们附加到修改后的对象

＆＃13;

// for testing
var $scope = { obj: {} };

var jsonData = {
  "_id": "58a3322bac70c63254ba2a9c",
  "name": "MailClass",
  "id": "MailTask_1",
  "createdBy": "tyuru",
  "__v": 0,
  "properties": [{
    "label": "Java Package Name",
    "type": "String",
    "editable": true,
    "binding": {
      "type": "property",
      "name": "camunda:class"
    },
    "$$hashKey": "object:29"
  }],
  "appliesTo": [
    "bpmn:ServiceTask"
  ]
};

var privateFields = removePrivateFields(jsonData, ['_id', '__v']);

// private fields got removed form actual jsonData
$scope.obj.data = jsonData;
console.log($scope.obj.data);

// once edit
// add private fields back to $scope.obj.data before POST
var modifiedData = Object.assign({}, $scope.obj.data, privateFields);
console.log(modifiedData);

function removePrivateFields(obj, props) {
  var output = {};
  props.forEach(function(prop) {
    if (obj.hasOwnProperty(prop)) {
      output[prop] = obj[prop];
      delete obj[prop];
    }
  });
  return output;
}

＆＃13;

Answer 2

在Angular最佳实践中，将此功能委派给您的控制器或获取对象的服务将会更高效。

理想情况下，您希望在Angular服务中执行任何对象操作或格式化，但您也可以在控制器中执行此操作（如果您只是使用模拟数据实例化JSON编辑器，则可能很好）。

如何使用角度ng模型隐藏要显示的对象属性？

2 个答案: