Question

所以我正在开发一个带有angularjs的项目。我的项目的目标是使用angular.i创建一个动态json生成器，使它成为第一个版本。但是，我的应用程序存在一个小问题。当用户输入内容时，输入会自动推送到我的对象，其中＆lt;＆gt;作为密钥。当用户改变主意并清除输入表单时，即使表单为空，密钥也会保留。因此，是否有人知道如何解决此问题？

这是我的HTML：

＆＃13;

 <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>

＆＃13;

和我的角度文件：

＆＃13;

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();
    }
})

＆＃13;

Answer 1

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

您的changeKeyValue功能应如下所示：

＆＃13;

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]
            }
        }			
    }
}

＆＃13;

Answer 2

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

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

演示

＆＃13;

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();
    }
});

＆＃13;

<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>

＆＃13;

使用angularjs删除对象属性

2 个答案: