Angular JS Action on ng-change the select dropdown

Question

I have a simple table with three rows and two values for each row - date and state:

<tbody>
   <tr>
      <td>Red</td>
        <td class="lastModified">{{item.redDate}}</td>
        <td class="status"> 
            <select id ="red" class="form-control" ng-change="update();" ng-model="item.redStatus">
              <option value="" disabled="" selected="" class="ng-binding">Please select the value</option>
              <option ng-selected="step.value === item.redStatus"  ng-repeat="(key, step) in steps">{{ step.title }}</option>
            </select>
       </td>
   </tr>
   <tr>Green</tr>
   <tr>
     ....
   </tr>                    
</tbody>

So, simple date and status values for red, green and blue. One in dropdown - status, the second - just output date.

On change the select value - i need to update the date with today's date.

 `$scope.item.redDate = new Date();`

Is it possible to have one function like ng-change="change();" Can't send with ng-change the ID...

Why you can't? You can send ID as argument in update() method like ng-change = "update('red')" what is the issue actually? — Samir Das, Apr 01 '15 at 17:19
Mmm... yes, and how then i could update the date? if it's $scope.item.redDate? In JS i'll d something like var date = id +'Date' — Sam Lewis, Apr 01 '15 at 17:23
So, function should be like $scope.update= function(id){ alert('id' + id); $scope.item[id+'Date'] = new Date(); }; But alert say, that Id is undefined . ng-change="update(id);" — Sam Lewis, Apr 01 '15 at 18:09
Oh you are sending direct id. I thought you would pass the color name like ng-change="update('red');" — Samir Das, Apr 01 '15 at 18:14
it's 3 items now, but it's a dynamic table, so number of rows will be changed. It would be good to have one function and send the id or something like this and change the proper value. Is it possible? — Sam Lewis, Apr 01 '15 at 18:19
If you have id like 'red', then what is the problem to send 'red' as argument. It is same as sending ID. Okay tell me how will you name id="red" when it is dynamic? — Samir Das, Apr 01 '15 at 18:25

score 15 · Accepted Answer · answered Apr 02 '15 at 07:34

Special thanks to Samir Das with help to find the solution ng-change="update(id);":

<select id ="red" class="form-control" ng-change="update(id);" ng-model="item.redStatus">
          <option value="" disabled="" selected="" class="ng-binding">Please select the value</option>
          <option ng-selected="step.value === item.redStatus"  ng-repeat="(key, step) in steps">{{ step.title }}</option>
 </select>

Here is the controller:

$scope.update = function(id){
    id = event.target.id;
    $scope.item[id+'Date'] = new Date();
 };

Angular JS Action on ng-change the select dropdown

1 Answers1

Linked