在AngularJS中創建動態ng模型

Question

以下是工作代碼-http://plnkr.co/edit/6lRhiTd1BrKRdThY0WNB?p=preview

在這種情況下，如果您從下拉列表中選擇數字並填寫數據，然后單擊並檢查控制台，您將看到如下結果：

[
    Object { start_time="12Start", end_time="12END"},
    Object { start_time="34start", end_time="786"},
    Object { start_time="123", end_time="5656"},
    Object { start_time="098", end_time="77"},
    Object { start_time="75757", end_time="57567"}
]

現在，如果您檢查，有兩個數組- $scope.shiftstart | $scope.shiftend

我正在遍歷這些，但是這種方法的一個問題是-

1）它必須取決於數組的相等長度。

2）如果有人離開第一個結束時間輸入字段，則它在控制台中為未定義 。

我的想法是不使用-單獨的ng-model="shiftstart[shiftnumber]"和ng-model="shiftend[shiftnumber]"相反，我可以使用一個包含多個對象的單個數組，但無法集成解決方案，讓我知道我可以在代碼中進行哪些修改以實現這一目標。

Answer 1

只要我能正確理解您的問題，我認為您會使事情變得過於復雜。 如果您簡單地想要：

• a）列出一個可以選擇的班次，以及
• b）能夠編輯所選的班次

那么以下就是您所需要的：

ctrl ：

$scope.shifts = [
  { nr: 1, start_time: "12Start", end_time: "12END" },
  { nr: 2, start_time: "34start", end_time: "786"   },
  { nr: 3, start_time: "123",     end_time: "5656"  },
  { nr: 4, start_time: "098",     end_time: "77"    },
  { nr: 5, start_time: "75757",   end_time: "57567" }
];

$scope.active = null;

查看演示 ：

<h3>Select a shift</h3>
<select
  data-ng-model="active"
  data-ng-options="shift as shift.nr for shift in shifts"
></select>

<div data-ng-show="active">
  <h3>Edit start/end</h3>
  start time <input data-ng-model="active.start_time"><br>
  snd time <input data-ng-model="active.end_time">
</div>

演示 ： http : //jsbin.com/fibilalaciha/1/