将 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

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

Binding Separate Groups of JSON Data to a UserID Number AngularJS

javascript

json

object

angularjs