創建構建了一個多維數組

我是一個PHP開發人員是新的角度和一般的JavaScript，但發現它真正強大的，快速創建交互式用戶界面創建構建了一個多維數組

我想創建一個表單中的動態表單用戶創建一個稱爲程序的對象，程序具有一些基本信息，如標題和說明，並且可以有許多個星期。我希望他們成爲一個'添加星期'按鈕，當按下時顯示一組與幾周有關的表單域，如果再次被按下，它會顯示另一組表單域來填寫第二週的信息。

edit1：具體來說，我如何使用addWeeks方法將對象添加到scope.program。

其次當我console.log $ scope.program它看起來很雜亂的對象內的對象內的很多數組。它只是dosnt看起來像一個乾淨的數據陣列，但也許這只是因爲我不習慣JavaScript和/或JSON？每個星期都會有明顯的7天，每天都會有很多事件，所以我覺得它會變得非常混亂，但也許我應該有信心：p

終於如何addProgram方法正在創建JSON對象發送到服務器

當表單提交它應該發表一個JSON對象，它看起來像這樣

program { 
    title: 'name of programme', 
    desc: 'description of programme', 
    weeks: [ 
      { 
       item1: 'foo', 
       item2: 'more foo' 
      }, 
      { 
       item1: 'foo2', 
       item2: 'more foo 2' 
      } 
      ] 
    ] 
}

這裏是我在做什麼，但現在一個codepen我不確定它是最好還是最好的方法，特別是我如何追加數組/對象在addWeek方法中。

將會有更多層次的表單和它發佈的對象（天，會話，excersises等），所以我想在添加所有這些之前獲得正確的基本操作。

HTML

<div ng-app="trainercompare"> 

<div ng-controller="programsController"> 

    <input type="text" placeholder="Program Title" ng-model="program.title"></br> 
    <input type="text" placeholder="Program Focus" ng-model="program.focus"></br> 
    <input type="text" placeholder="Program Description" ng-model="program.desc"></br> 

    <button ng-click="addWeek()"> add week</button> 

    <div ng-repeat="week in program.weeks"> 

     <input type="text" placeholder="Name the week" ng-model="week.name"> 
     <input type="text" placeholder="Describe It" ng-model="week.desc"> 
     {{ week.name }}</br> 
     {{ week.desc }}</br> 

    </div> 

    <button ng-click="addProgram()"> add program</button> 

</div> 

</div>

app.js

var myModule = angular.module("trainercompare", ['ui.bootstrap']); 

function programsController($scope, $http) { 


    $scope.program = { 
     weeks: [{ 

     }] 
    }; 

    $scope.addWeek = function() { 
     $scope.program.weeks.push(
      { 

      } 
     ); 
    }; 


    function isDefined(x) { 
    var undefined; 
    return x !== undefined; 
    } 

    $scope.addProgram = function() { 

     var program = { 
      title: $scope.program.title, 
      focus: $scope.program.focus, 
      desc: $scope.program.desc, 
      weeks: [] 
     }; 

     angular.forEach($scope.program.weeks, function(week, index){ 
      var weekinfo = { 
       name: week.name, 
       desc: week.desc 
      }; 

      program.weeks.push(weekinfo); 
     }); 

     $http.post('/programs', program).success(function(data, status) { 
      if(isDefined(data.errors)) { 
       console.log(data.errors); 
       } 
      if(isDefined(data.success)) { 
       console.log(data.success); 
      } 
     }); 

    }; 


}

來源

2014-01-09 Ir1sh

看起來好像沒什麼問題...你有一個更具體的問題？ – Hylianpuffball

感謝您的回覆，我在標題爲edit1 – Ir1sh

的頂部添加了一些更具體的問題，這完全沒問題。添加一個空白的星期是完全有效的代碼，並且不是一個糟糕的設計模式，如果這就是你要做的。另一種方法是將兩個輸入放在'ng-repeat'之外，然後使用tempWeek對象進行建模，然後使'addWeek（）'爲'$ scope.program.weeks.push（tempWeek）; tempWeek = {};'。 – Hylianpuffball

看起來像你對我已經有了一個好把握。 addWeek代碼看起來正確。當您的模型是您的模型時，您看到的額外數據是Angular內部追蹤綁定的內容。當你發佈到你的服務器時，它應該由Angular清理。

Angular有一個JSON函數，可以從JSON中刪除所有的哈希值和其他'有角'的東西。這就是爲什麼他們以$開始，所以它知道刪除它們。

這會自動發生在你使用$http，它是這裏的文檔：

如果請求配置對象的數據屬性包含一個對象，它序列化到JSON格式。

由於角度將清理哈希和事情，你並不需要「重建」當你發佈它的模型...只是一組數據，以$scope.program和$scope.addProgram刪除代碼的70％。

要了解具體如何角清理JSON，看看這個答案：Quick Way to "Un-Angularize" a JS Object

來源

2014-01-09 21:49:22

創建構建了一個多維數組

回答

相關問題