jquery - input text with ng-model and set value through javascript - Stack Overflow

admin管理员组

文章数量:1416333

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

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

• javascript
• jquery
• angularjs
• twitter-bootstrap
• angularjs-ng-model

Share Improve this question Follow asked Nov 24, 2015 at 3:40 d_unknownd_unknown 87533 gold badges1515 silver badges4242 bronze badges 3

• could you please show your code to call the angular method delete(thing)? Is the data is correct to the function delete? – Abhilash Augustine Commented Nov 24, 2015 at 4: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 Commented Nov 24, 2015 at 6:26
• did you try my answer? – Abhilash Augustine Commented Nov 24, 2015 at 6:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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 piler to pile 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>

本文标签： jqueryinput text with ngmodel and set value through javascriptStack Overflow