首页 文章

输入值因jquery更改失败后更新输入的ng-model

提问于
浏览
-1

EDITED :更清楚问题并在下面的代码中修正了一些拼写错误 .

情况:这只是一个演示,我想在一个真实的项目中完成的一个例子,其中实际上从Web服务获取一个名称数组,然后我用这些名称找到输入,使用jQuery和它们选择它们然后设置它们的值(使用jQuery) .

问题:我需要知道如何更新我使用jquery更改其value属性的值的ng-model

我试过这些

...但我没有幸运的任何选项 .

我正在使用angularJS v1.4.8和jQuery v1.11.1

我已尝试将输入类型设置为 hidden 并使用 style: display:none 键入 text 但我无法使其正常工作 .

这是我正在尝试做的演示 . 这有和输入和一个绑定相同的ng模型的 Span ,当你单击按钮时,它应该通过jQuery更改输入值,然后更新ng模型 .

<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  </head>
  <body data-ng-app="app">
    <div data-ng-controller="myCtrl as ctrl">
    <span>Value: {{ctrl.myValue}}</span>
    <input name="myId" type="hidden" data-ng-model="ctrl.myValue" />
    <button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
    </div>

<script>
//my controller
angular.module('app', [])
  .controller('myCtrl', function(){

  var vm = this;

  vm.wizard = {
    changeValue: fnChangeValue
  }

  return vm.wizard;

  function fnChangeValue(newValue){
    var e = $('#myId');
    e.val(newValue);
    e.trigger('input'); //first option

    //e.triggerHandler('change'); //second option
  }
});
</script>

  </body>

</html>

2 回答

  • 1

    你写了 var e = $('#myId'); 并在输入中有

    <input name="myId" type="hidden" data-ng-model="ctrl.myValue2" />
    

    我想你错过了id属性试试这个:

    <input id="myId" type="hidden" data-ng-model="ctrl.myValue2" />
    
  • 0

    固定ID并添加了jQuery的 change() ,这可能就是你想要做的 . 您可以在下面找到修复的代码 . 以下是通常单独使用AngularJS的方法:https://jsfiddle.net/rwtm1uh9/

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    
    <div data-ng-app="app">
      <div data-ng-controller="myCtrl as ctrl">
        <span>Value: {{ctrl.myValue}}</span>
        <input id="myId" data-ng-model="ctrl.myValue" />
        <button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
      </div>
    
      <script>
        //my controller
        angular.module('app', [])
          .controller('myCtrl', function() {
    
            var vm = this;
    
            vm.wizard = {
              changeValue: fnChangeValue
            }
    
            return vm.wizard;
    
            function fnChangeValue(newValue) {
              var e = $('#myId');
              e.val(newValue);
              e.change();
            }
          });
      </script>
    
    </div>
    

相关问题