Question

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

我上传照片以展示我的想法，我也会解释它： showcasing data structures i want to achieve

所以我的主要数据是客户群。我将它设置为迭代并使用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();

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

<强> Demo

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

1 个答案: