使用angularjs删除对象属性
delete object property with angularjs
所以我正在用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]
}
}
}
}
相关文章:
- 为什么我可以在Array属性对象中找到Javascript Array for Each方法
- 使用onclick调用属性对象函数
- 嵌套为..in 循环,列出多维对象的属性(对象)
- 动态属性对象 - JSON
- 在不使用隔离范围angularjs自定义指令的情况下获取属性对象
- 通过属性传递属性/对象.Javascript
- Javascript:属性/对象的类型
- 访问JSON中的属性(对象)
- 属性对象Javascript不是用Jquery Deferred设置的
- 无法读取属性'#<对象>'未定义的获取错误
- Twitter中多属性对象的子字符串匹配
- 无法设置'data'属性'对象'标记.(只IE8)
- 更新数据属性对象属性值
- 将属性对象的选定对象从原型推入数组
- 将单个属性对象字面量的数组转换为仅包含其值的数组的最佳方法
- 寻找一种更简单的方法来检查是否多个属性&对象中的方法是未定义的
- 主干模型:带有get方法的空属性,但在属性对象中
- 如何赋值给"text"someText"属性对象在动能js
- Angularjs的数据绑定与数据属性对象
- 如何将一个嵌套的javascript对象转换为只有一级属性对象