Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular JS Action on ng-change the select dropdown

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

like image 874
Sam Lewis Avatar asked Apr 01 '15 17:04

Sam Lewis


People also ask

How do I get the value of the selected dropdown menu item with angular?

Using NgModel Directive Angular has another way to get the selected value in the dropdown using the power of ngModel and two-way data binding. The ngModel is part of the forms module. We need to import it into the NgModule list in the app. module , which will be available in our app.

How do you use NG on change?

Definition and UsageThe ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.

How do I set default selected value in ng-options?

Use ng-init to set default value for ng-options . Save this answer.

How do I bind a dropdown in angular 12?

Use unique identifiers as values for dropdown options, which in your case is category ids. Now pass the category id from the portal object to ngModel directive to bind the value to dropdown. You can use ngModelChange directive to listen for category id value changes and update the same in portal object.


1 Answers

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();
 };
like image 70
Sam Lewis Avatar answered Nov 03 '22 00:11

Sam Lewis