input text with ng-model and set value through javascript

Question

I have a table that display list of data that can be deleted. And in that table, I have checkboxes for the user to select which data will be deleted. And when a delete button is clicked, a modal will appear and in that modal is an input text with ng-model. And its value will be set through javascript/jquery. I want it to be deleted via angularjs $http request. I have observed that it is working only when I input a text in the textfield. But when it is set through javascript, it is not working. This is the input field inside the modal.

   <input class="form-control" id="id" ng-value=""  ng-model="Thing.id" />

And the modal:

 <script type="text/javascript">
$('#delete_item').on('show.bs.modal', function (event)  { 
  var button = $(event.relatedTarget) 
  var modal = $(this)  
  var ids=getID_delete.call();
    $('.modal-body #id').val(ids) ;
    modal.find('.modal-body #message').text('Are you sure you want to delete it?'); 
  });</script>

And here the angular js controller:

mainApp.controller('equipmentController', ['$scope', '$http', function($scope, $http) {
$scope.equipments=[]
$http.get(BASE_URL+'Equipment/getAllEQs').success( function(response) {
                       $scope.equipments = response

                    });
$scope.delete = function(Thing) {
$params = $.param({
  "id": Thing.id

})
return $http({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    url:BASE_URL+'Equipment/DeleteEQ',
    method: "POST",
    data: $params,
  })
    .success(function(response) {
     $('#delete_item').modal('hide');
    $scope.equipments = response
    });
 }
}]);

could you please show your code to call the angular method `delete(thing)`? Is the data is correct to the function `delete`? — Abhilash Augustine, Nov 24 '15 at 04:01
@AbhilashPA, when I `alert(Thing.id)` the result is `undefined`.. but when I input data in the input text manually, it works fine.. — d_unknown, Nov 24 '15 at 06:26

score 2 · Answer 1 · edited May 23 '17 at 11:59

First of all, you should not be using JQuery in AngularJs it is not a good practice, whenever you need to interact with the DOM, you should use a directive "Thinking in AngularJS" if I have a jQuery background?

However you can use this as a work arround:

<input type="text" class="form-control" id="id" ng-value=""  
 ng-model="Thing.id" ng-model-options="{ updateOn: 'change' }" />

In your JQuery code you should use:

$('.modal-body #id').val(ids).trigger("change");

This will force the model to be updated on input change

Here is a jsFiddle exmple

score 1 · Answer 2 · answered Nov 24 '15 at 04:17

You can access your angular controller scope from your jquery code. So you can just set the value directly to scope.

var controllerElement = document.querySelector('[ng-controller="your_controller"]');
var controllerScope = angular.element(controllerElement).scope();
controllerScope.Thing.id = ids;

You can force your angular compiler to compile your html from jquery to update the view.

controllerScope.$apply( function(){
    controllerScope.Thing.id = ids;
});

So your code should be look like this,

<script type="text/javascript">
    $('#delete_item').on('show.bs.modal', function (event)  { 
      var button = $(event.relatedTarget) 
      var modal = $(this)  
      var ids=getID_delete.call();
      var controllerElement = document.querySelector('[ng-controller="your_controller"]');
      var controllerScope = angular.element(controllerElement).scope();
      controllerScope.$apply( function(){
          controllerScope.Thing.id = ids;
      });
      modal.find('.modal-body #message').text('Are you sure you want to delete it?'); 
    });
</script>

no error displayed and also no value is set.. it is just blank in the input textfield.. — d_unknown, Nov 25 '15 at 11:29

input text with ng-model and set value through javascript

2 Answers2