将单独的 JSON 数据组绑定到用户 ID 号 AngularJS

Question

我一直无法弄清楚如何将数据保存为单独的表单，但在 angularJS 内部绑定在一起。这是出于教育和测试目的，因此我无需担心将此数据设置为数据库或使用除应用程序会话和本地存储之外的任何类型的存储。对于测试，我将硬编码到我的 JS 中。

我正在上传一张照片来展示我的想法，我也会解释一下：

所以我的主要数据是客户组。我将其设置为使用 ng-repeat 进行迭代和显示。那里没有大的担心。我可以添加和更新其中的每一个。当我将提案附加到客户 json 对象时，然后当我编辑用户时，它会删除这些提案和报价。所以我想将它们分开，但允许特定用户将它们调用到 DOM 中。

我的问题： 是我不知道如何将对象绑定到对象，并在发生其他操作时让它们在 dom 中更新。这是我迄今为止所拥有的一支笔 http://codepen.io/ddavisgraphics/pen/pvRZOv?editors=101。

代码数据示例：

var customerArray = [
    // Start Customer 
    //--------------
    {
        customerID:1,
        customer: 'Joe Frankelton',
        phone: 1244957323,
        email: 'jFrank@gmail.com',
        // start address 
        address: { 
            line1:'248 Gallows Rd',
            city:'Hangtown', 
            state:'West HangState',
            zip:24750
        },
    }, // End Customer 
     // Start Customer 
    //--------------
    {
        customerID:2,
        customer: 'Danny Manny',
        phone: 1245423323,
        email: 'dman@gmail.com',
        // start address 
        address: { 
            line1:'253 Cow Run Rd',
            city:'Beeftown', 
            state:'PA',
            zip:24750
        },
    }, // End Customer 
];

var  proposals = [
            { // Proposal 1 
                customerID: 1,
                projectTitle: 'Gameify Me Captin',
                type: 'GameDesign',
                deadline: 'Jan. 2, 2015',
                deliveryType: 'Files',
                problem: 'The problem is that the customer wants to much crap.',
                notes: 'clients mother wants to be involved because she designed a peice of toast in 1973',
            },
            { // Proposal 2
                customerID: 2,
                projectTitle: 'Playing',
                type: 'Website',
                deadline: 'Jan. 2, 2017',
                deliveryType: 'Sites',
                problem: 'Everything',
                notes: 'client will be easy to work with, wants pink and blue',
            },
        ]; 

  var quotes = [
            {
                customerID: 2,
                quoteNum: 2,
                projectTitle: 'Project Title',
                type: 'Graphic Design',
                deadline: 'Jan. 2, 2015',
                billableHrs: 11,
                hourlyRate: 42.50,
                externalCost: 33.99,
                tax: 0.6,
            }
    ];

Answer 1

您可以做的是通过映射来自多个来源（即客户、提案和报价）的数据来为客户创建视图模型。

您可以使用customerID进行链接，例如：

customer.proposals = proposals.filter(function(prop){ 
       return prop.customerID === custId;
 });

所以你会这样做：

function getMappedCustomer() {
     return customerArray.map(function(customer){
        var custId = customer.customerID;
        customer.proposals = proposals.filter(function(prop){ return prop.customerID === custId;});
        customer.quotes = quotes.filter(function(quot){ return quot.customerID === custId;  });
        return customer;
     });
  }
  // Init current data
  $scope.customers = getMappedCustomer(); 

在对更新的客户进行映射时也这样做。如果您想保留customerArray，请使用angular.copy(customerArray) 并对其进行映射。

Demo