如何隱藏使用角度ng模型顯示的對象屬性？

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函數提交到服務器之前剝去原始對象的私有字段和它們附加回修改的對象

// 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; 
 
}

Answer 2

這將是雙方更好的性能，並沿角的最佳實踐，而不是委託該功能爲您的控制器或服務獲取的對象。理想情況下，您想要在Angular服務中執行任何對象操作或格式化，但是您也可以在您的控制器中執行此操作（如果您只是使用模擬數據實例化JSON編輯器，那麼可能很好）。