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

Vlada

Why you can't? You can send ID as argument in update() method like ng-change = "update('red')" what is the issue actually? – Theta

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' – Vlada

Like this $scope.item[id+'Date'] = new Date(); – Theta

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);" – Vlada

Oh you are sending direct id. I thought you would pass the color name like ng-change="update('red');" – Theta

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? – Vlada

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? – Theta

Answer 1

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();
 };

Vlada