如何使用 AngularJS 模型定义*对象键*？答案

【问题标题】：How to define *object keys* using AngularJS models?如何使用 AngularJS 模型定义*对象键*？
【发布时间】：2013-01-22 10:24:55
【问题描述】：

我喜欢构建一个快速工具来定义一个“JSON-schema”，如下所示：

{
      "type": "object",
      "properties": {
          "myFirstProperty": {
              "type": "integer"
          }
      },
      "title": "MySchema",
      "description": "some description"
    }

在此处查看预览：http://jsfiddle.net/franquis/djRFN/4/embedded/result/

在此处查看代码：http://jsfiddle.net/franquis/djRFN/4/

使用简单的表单，我可以使用“ng-model”属性定义“name”、“description”，但是当谈到我的架构的“properties”定义时，我遇到了一些麻烦:)

我所做的是：

首先创建了一个“$scope.newProperties”数组，其中存储了我想添加到我的架构“$scope.schema”中的属性
在此数组上添加了一个侦听器，以便将新属性添加到我的“$scope.schema.properties”

我的问题：

当我创建一个新属性时，当我输入新密钥的名称（即主机名）时，它会创建很多新属性... 见下文：

{
      "type": "object",
      "properties": {
         "h": {},
         "ho": {},
         "hos": {},
         "host": {},
         "hostn": {},
         "hostna": {},
         "hostnam": {},
         "hostname": {
            "type": "integer"
         }
      },
      "title": "MySchema",
      "description": "some description"
    }

我知道这种行为是由 "$watch("myva",function(a,b){},true);" 函数引起的，但我还能尝试什么才能成功？

感谢您的帮助！

【问题讨论】：

但是你为什么需要newProperties？为什么不直接绑定到$scope.schema.properties 并编辑它们？如果包含一些其他属性（如默认集），您可以拥有默认集和过滤器属性，而不是在该默认集中。但总的来说，我认为绑定到结果模型要容易得多。
我认为我不能将输入绑定到对象的属性名称，对吧？如果我错了，你有什么例子吗？

标签： angularjs

【解决方案1】：

在遍历项目之前重置$scope.schema.properties：

$scope.$watch(function(){return $scope.newProperties;},function(items,b){
    $scope.newSchema.properties = {};
    angular.forEach(items, function(obj){
        if(angular.isDefined(obj.key)) {
            var key = obj.key, type = obj.type, name = obj.name;
            $scope.newSchema.properties[key] = {
                "name": name,
                "type": type
            };
        }
    });
},true);

这是保持$scope.schema 有序并与$scope.newProperties 同步的最佳方式

【讨论】：