使用angularjs删除对象属性

delete object property with angularjs

本文关键字：属性 对象 删除 angularjs 使用      更新时间：2023-09-26

所以我正在用angularjs做一个项目。我的项目的目标是用angular制作一个动态json生成器。我做了第一个版本，它可以工作。但是，我的应用程序有一个小问题。当用户输入一些东西时，输入会自动推送到我的对象，并以<>作为键。当用户改变主意并清除输入表单时，即使表单是空的，键也会保留。所以，有人知道我该如何解决这个问题吗?

这是我的HTML: 

 <div  ng-controller="ctrl"  >
    
	<form>GivenName:
        <input type="text" ng-model="person.givenName" ng-change='change()'/>
        <br/>FamilyName:
        <input type="text" ng-model="person.familyName" ng-change='change()' />
        <br/>Gender:
        <input type="text" ng-model="person.gender" ng-change='change()' />
        <br/>Nationality:
        <input type="text" ng-model="person.nationality" ng-change='change()' />
        <br/>WorksFor:
        <input type="text" ng-model="person.worksFor" ng-change='change()' />
        <br/>JobTitle:
        <input type="text" ng-model="person.jobTitle" ng-change='change()' />
        <br/>Url:
        <input type="text" ng-model="person.url" ng-change='change()' />
        <br/>Image:
        <input type="text" ng-model="person.image" ng-change='change()' />
        <br/>
    </form>
     <h1>Your JSON</h1>
    <pre>{{output | json}}</pre>
</div>

和我的angular文件:

angular.module("watch", [])
.controller("ctrl", function($scope) {
    $scope.output = {
            "@context": {
            "schema": "http://schema.org/"
			},
           "@graph": [{
            "@id": "person",
			"@type": "schema:Person",
			}
			]
	
    }
    $scope.person = {};
   
	    function changeKeyValue() {
        for (var key in $scope.person) {
            if ($scope.person.hasOwnProperty(key)) {
                $scope.output["@graph"][0]["schema:" + key] = $scope.person[key];
            }
			else if 
			
        }
    }
    $scope.change = function () {
        changeKeyValue();
    }
})

在changeKeyValue函数中添加if语句，检查属性值是否为空，如果为空则删除键

if(!$scope.person[key].length){
    delete $scope.output["@graph"][0]["schema:" + key];
} else {
    $scope.output["@graph"][0]["schema:" + key] = $scope.person[key];
}


angular.module("watch", [])
.controller("ctrl", function($scope) {
    $scope.output = {
        "@context": {
            "schema": "http://schema.org/"
        },
        "@graph": [{
            "@id": "person",
			"@type": "schema:Person",
	    }]	
    };
    $scope.person = {};
   
	function changeKeyValue() {
        for (var key in $scope.person) {
            if ($scope.person.hasOwnProperty(key)) {
                if(!$scope.person[key].length){
                   delete $scope.output["@graph"][0]["schema:" + key];
                } else {
                   $scope.output["@graph"][0]["schema:" + key] = $scope.person[key];
                }
            }
        }
    }
    $scope.change = function () {
        changeKeyValue();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="watch" ng-controller="ctrl"  >
    
	<form>GivenName:
        <input type="text" ng-model="person.givenName" ng-change='change()'/>
        <br/>FamilyName:
        <input type="text" ng-model="person.familyName" ng-change='change()' />
        <br/>Gender:
        <input type="text" ng-model="person.gender" ng-change='change()' />
        <br/>Nationality:
        <input type="text" ng-model="person.nationality" ng-change='change()' />
        <br/>WorksFor:
        <input type="text" ng-model="person.worksFor" ng-change='change()' />
        <br/>JobTitle:
        <input type="text" ng-model="person.jobTitle" ng-change='change()' />
        <br/>Url:
        <input type="text" ng-model="person.url" ng-change='change()' />
        <br/>Image:
        <input type="text" ng-model="person.image" ng-change='change()' />
        <br/>
    </form>
     <h1>Your JSON</h1>
    <pre>{{output | json}}</pre>
</div>

通过使用delete运算符。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

你的changeKeyValue函数应该是这样的:

function changeKeyValue() {
    for (var key in $scope.person) {
        if ($scope.person.hasOwnProperty(key)) {
            if($scope.person[key]) {
                $scope.output["@graph"][0]["schema:" + key] = $scope.person[key];
            }
            else {
                delete $scope.output["@graph"][0]["schema:" + key]
            }
        }			
    }
}

相关文章：