adasdasd adasdasd - 3 months ago 7
AngularJS Question

Updating data of an array in angularJS

What i am trying to do is to make a simple app from where a user can edit his availability on weekdays. the code is working fine.. i am fetching the data from select box but the problem when i am trying to update data of monday the tuesday data is also updating with the same value of monday**(as you can see in the last view)**

my db JSON

"doctorSchedule" : [
{
"_id" : null,
"working_day" : "Monday",
"working_from" : [
{
"_id" : null,
"hours" : "9",
"minutes" : "30"
}
],
"working_to" : [
{
"_id" : null,
"hours" : "6",
"minutes" : "30"
}
]
},
{
"_id" : null,
"working_day" : "Tue",
"working_from" : [
{
"_id" : null,
"hours" : "9",
"minutes" : "30"
}
],
"working_to" : [
{
"_id" : null,
"hours" : "6",
"minutes" : "30"
}
]
}
],


My Angular code.

$scope.data1 = $stateParams.viewUser;
$http({
url: "/getinfo",
method: "POST",
headers :{'Content-Type': 'application/json','Accept': 'application/json'},
data: dataParam
}).success(function(response) {
if(response.status_code == "worked") {
$scope.viewUser = response.clinicUserVo;
$scope.datasc = response.doctorSchedule;
}
});


My HTML file

<table class="table table-bordered" ng-repeat="docSchedule in data1.doctorSchedule">
<tr> <th scope="col"><input type="checkbox" ng-model="data1.working_day"></th>
<td>{{docSchedule.working_day}}</td>
<td>

<select id="user_time_zone" class="form-control form-group" ng-model="data1.working_from">

<option value="" >{{docSchedule.working_from[0].hours}}</option>
<option id="optionspec" value="01" >01</option>
<option id="optionspec" value="02" >02</option>
<option id="optionspec" value="03" >03</option>
<option id="optionspec" value="04" >04</option>
<option id="optionspec" value="05" >05</option>
<option id="optionspec" value="06" >06</option>
<option id="optionspec" value="07" >07</option>
<option id="optionspec" value="08" >08</option>
<option id="optionspec" value="09" >09</option>
<option id="optionspec" value="10" >10</option>
<option id="optionspec" value="11" >11</option>
<option id="optionspec" value="12" >12</option>
<option id="optionspec" value="13" >13</option>
<option id="optionspec" value="14" >14</option>
<option id="optionspec" value="15" >15</option>
<option id="optionspec" value="16" >16</option>
<option id="optionspec" value="17" >17</option>
<option id="optionspec" value="18" >18</option>
<option id="optionspec" value="19" >19</option>
<option id="optionspec" value="20" >20</option>
<option id="optionspec" value="21" >21</option>
<option id="optionspec" value="22" >22</option>
<option id="optionspec" value="23" >23</option>
</select>

<td>
<div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
<select id="user_time_zone" class="form-control form-group" ng-model="data1.working_from">
<option value="" disabled="disabled">{{docSchedule.working_from[0].minutes}}</option>
<option id="optionspec" value="" >00</option>
<option id="optionspec" value="05" >05</option>
<option id="optionspec" value="10" >10</option>
<option id="optionspec" value="15" >15</option>
<option id="optionspec" value="20" >20</option>
<option id="optionspec" value="25" >25</option>
<option id="optionspec" value="30" >30</option>
<option id="optionspec" value="35" >35</option>
<option id="optionspec" value="40" >40</option>
<option id="optionspec" value="45" >45</option>
<option id="optionspec" value="50" >50</option>
<option id="optionspec" value="55" >55</option>
</select>
</div>
</td>
</td>
<td><b>to</b></td>
<td>
<div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
<select id="user_time_zone" class="form-control form-group" ng-model="data1.working_to" name="user_time_zone">
<option value="" disabled="disabled">{{docSchedule.working_to[0].hours}}</option>
<option id="optionspec" value="" >00</option>
<option id="optionspec" value="05" >05</option>
<option id="optionspec" value="10" >10</option>
<option id="optionspec" value="15" >15</option>
<option id="optionspec" value="20" >20</option>
<option id="optionspec" value="25" >25</option>
<option id="optionspec" value="30" >30</option>
<option id="optionspec" value="35" >35</option>
<option id="optionspec" value="40" >40</option>
<option id="optionspec" value="45" >45</option>
<option id="optionspec" value="50" >50</option>
<option id="optionspec" value="55" >55</option>
</select>
</div>
</td>
<td><b>:</b></td>
<td>
<div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
<select id="user_time_zone" class="form-control form-group" ng-model="data1.working_to" name="user_time_zone">
<option value="" disabled="disabled">{{docSchedule.working_to[0].minutes}}</option>
<option id="optionspec" value="" >00</option>
<option id="optionspec" value="01" >01</option>
<option id="optionspec" value="02" >02</option>
<option id="optionspec" value="o3" >03</option>
<option id="optionspec" value="04" >04</option>
<option id="optionspec" value="05" >05</option>
<option id="optionspec" value="06" >06</option>
<option id="optionspec" value="07" >07</option>
<option id="optionspec" value="08" >08</option>
<option id="optionspec" value="09" >09</option>
<option id="optionspec" value="10" >10</option>
<option id="optionspec" value="11" >11</option>
<option id="optionspec" value="12" >12</option>
<option id="optionspec" value="13" >13</option>
<option id="optionspec" value="14" >14</option>
<option id="optionspec" value="15" >15</option>
<option id="optionspec" value="16" >16</option>
<option id="optionspec" value="17" >17</option>
<option id="optionspec" value="18" >18</option>
<option id="optionspec" value="19" >19</option>
<option id="optionspec" value="20" >20</option>
<option id="optionspec" value="21" >21</option>
<option id="optionspec" value="22" >22</option>
<option id="optionspec" value="23" >23</option>
</select>

</div>
</td>

</tr>






<tr>

</tr>
<tr >


</table>


HTML VIEW

See in this html page when i am trying to updatemonday data and the tue data is also automatically changing how can i solve it through Angular?

enter image description here

Answer

Change

<select id="user_time_zone" class="form-control form-group" ng-model="data1.working_from">

to

<select id="user_time_zone" class="form-control form-group" ng-model="docSchedule.working_from">

Because that way, each select of each ng-reapeat will point its data to the respective docSchedule.

Understood? Saying with other words, your code doesn't work as expected because data1.working_from points to the same model in every scopes, in every ng-repeat's.