3

我正在使用 angularJs（我是新手）来验证表单上的某些字段。这是我遇到问题的特定输入。

<input type="text" ng-required="!isWPPOnly" name="grades"
    ng-class="{error:frmTestingDates.grades.$invalid}"
    ng-model="date.grades" style="display:;"/>

如果我按下 1、2、3 之类的键，则会触发验证。但是，如果我在控制器中使用 javascript 设置该输入控件的值，例如

$("[name=grades]").val('1');

angularJs 不知道控件的值发生了变化。我猜它会监听 keydown 或 keyup 事件。

无论如何，设置值后如何从控制器手动触发该验证？

这是我单击按钮时在控制器中触发的代码

$scope.togglegrade = function (obj) {                   
        var checkedGrades = [];
        $("[name=grades]").val('');
        $("input:checkbox[name=chkGrades]:checked").each(function()
        {                                
            checkedGrades.push($(this).val());          
            $("[name=grades]").val(checkedGrades);      

        });

    };

我试过了，但它不起作用

$scope.togglegrade = function (obj) {
        $scope.apply(function () {
            alert(1);
            var checkedGrades = [];
            $("[name=grades]").val('');
            $("input:checkbox[name=chkGrades]:checked").each(function()
            {                                
                checkedGrades.push($(this).val());          
                $("[name=grades]").val(checkedGrades);                  
            });
        });                             
    };

您可以在此处查看完整的 html payment.html http://pastebin.com/9wesxaVd 完整的控制器 payment.js 在此处http://pastebin.com/1FWJKYyy

请注意，我已经将 payment.html 中的 ng-required="!isWPPOnly" 第 454 行注释了一段时间，直到我找到解决问题的方法。我需要提到的另一件事是，这个应用程序在它的控制器和整个应用程序的任何其他地方都没有 date.grades 的定义。它必须以某种方式自动生成

4

2 回答 2

4

首先，你不应该在你的视图中使用jQuery和任何类型的 DOM 操作。您唯一可以这样做的地方是指令（以及一些特定类型的服务，非常非常罕见）。考虑声明性而不是命令性。

另外，忘记通过事件绑定，只需更改模型值，例如：

$scope.$apply(function(){
  $scope.date.grades  = 'foo bar';
})

我无权使用任何文本编辑器或 IDE atm，所以如果有任何拼写错误，请告诉我。

编辑

我已经创建了一个简单的示例，其中包含关于 AngularJS 中的 ng-model 和数据绑定的良好实践。代码基于您提供的源代码。

查看 Plunkr

http://embed.plnkr.co/bOYsO4/preview

资源：

看法 
<!DOCTYPE html>
<html ng-app="app">

  <!-- ... -->
  <body ng-controller="test">
    <!--Note that the form creates its own controller instance-->
    <form name="testForm" class="form form-horizontal">

      <label><input type="checkbox" ng-model="model.isWPPOnly"> isWPPOnly</label>


      <!-- element name CANNOT contain a dot, since it's used as a form controller property  -->
      <input type="text" ng-required="!model.isWPPOnly" name="date_grades" ng-model="date.grades" />

      <h3>Result</h3>
      <pre>{{date | json}}</pre>
      <pre>{{model | json}}</pre>
    </form>
  </body>

</html>
控制器 
angular.module('app', []).controller('test', function($scope){
  // Create object to store bindings via references
  // In javascript simple types (Number, String, Boolean) are passed via value 
  // and complex ones ([], {}) via reference (1)
  $scope.model = {}
  $scope.model.isWPPOnly = true;
  $scope.date = {};
  $scope.date.grades = 'foo';


  // (1) I know, I've oversimplified it a little bit, since everything's and object in JS.

})
CSS 
/* Note that there's no need to create an .error class, since angular provides you with default ones */
.error, .ng-invalid{
  border: 1px solid red;
  box-shadow: 0 0 10px red;
}

form{
  padding: 10px;
}
于 2013-08-01T14:47:52.357 回答
0 
$scope.$apply(function () {
  $('[name=grades]').val('1');
});
于 2013-08-01T14:34:40.787 回答