Creating Dynamic ng-model in AngularJS

Question

Following is the working code - http://plnkr.co/edit/6lRhiTd1BrKRdThY0WNB?p=preview

In this if you select the number from drop down and fill data then click and check console you will see the result like -

[
    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"}
]

Now If you check, there are two arrays - $scope.shiftstart | $scope.shiftend

I am looping through these but one problem with this approach is that-

1) It needs to be dependent on the equal length of arrays.

2) If some one leaves the first end time input field then it comes as undefined in the console.

What I am thinking is to not to use - separate ng-model="shiftstart[shiftnumber]" & ng-model="shiftend[shiftnumber]" instead I could use ONE single array containing multiple objects but I am unable to integrate the solution, let me know what I can amend in my code to make that happen.

I have no glue what it is that you're actually trying to do... — Yoshi
– Yoshi, Commented Aug 28, 2014 at 7:40
@Yoshi I want ng-model="shiftstart[shiftnumber]" & ng-model="shiftend[shiftnumber]" to be used as a single entity like ng-model="shift.start_time[shiftnumber]" & ng-model="shift.end_time[shiftnumber]" so that it will produce the same array of object result — Trialcoder
– Trialcoder, Commented Aug 28, 2014 at 8:38

Yoshi · Accepted Answer · 2014-08-28 09:08:16Z

1

Provided I do understand your question correctly, I think you're way overcomplicating stuff. If you simple want to:

a) have a list of shifts, from which one can be selected, and
b) be able to edit that selected shift

then the following is all you need:

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;

view-demo:

<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>

demo: http://jsbin.com/fibilalaciha/1/

answered Aug 28, 2014 at 9:08

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trialcoder Over a year ago

Yeah I think its better if i provide pre filled data

Collectives™ on Stack Overflow

Creating Dynamic ng-model in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related