访问表单控制AngularJS中的值，而不绑定数据

Access form controls values in AngularJS without data binding

本文关键字：绑定 数据 表单 访问表 控制 AngularJS 访问      更新时间：2023-09-26

我有一个由轨道脚手架生成的表单，它可以正确工作。我想在这个表单中添加一个新的Angular控制器来计算一种分数/进度条，向用户显示他的应用程序完成的百分比。

我在更新中遇到了一个问题。实际上，

  • Rails正在为表单控件赋值
  • ngModel正在重置该控制器，因为我没有初始化javascript部分中的值

在下面的代码中，在编辑期间，side_id控件变为空。

有没有一种干净的方法可以在不进行任何数据绑定的情况下读取不同控件的表单？

  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#general" data-toggle="tab">Données générales</a></li>
    <li><a href="#location" data-toggle="tab">Location</a></li>
    <li><a href="#suppl" data-toggle="tab">Données supplémentaires</a></li>
    <li><a href="#photos" data-toggle="tab">Photos</a></li>
  </ul>
  <div id="my-tab-content" class="tab-content">
    <div class="tab-pane mypanel active" id="general">
      <br/>
      <div class="form-group">
        <div class="col-md-2">
          <div class="field">
            <%= f.label :side_id %><br>
            <%= f.collection_select(:side_id, Side.all,:id,:label,{}, {:class => "form-control", "ng-model" => "side_id"}) %>
            {{side_id}}
          </div>          
        </div>
        <div class="col-md-4">
          <div class="field">

您可以创建指令来初始化ngModel中的值，默认值来自html。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.options = [{
      id: 0,
      name: "No"
    }, {
      id: 1,
      name: "Yes"
    }, {
      id: 2,
      name: "Unknow"
    }];
  })
  .directive('initValue', function() {
    return {
      restrict: "A",
      require: "ngModel",
      scope: {
        initValue: "=",
        ngModel: "="
      },
      link: function(scope) {
        scope.ngModel = scope.initValue;
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <input ng-model="id" init-value="'dfdffd'">
    <pre>id={{id}}</pre>
    <select ng-model="idSelect" init-value="'2'">
      <option value="0">No</option>
      <option value="1">Yes</option>
      <option value="2">Unknow</option>
    </select>
    <pre>idSelect={{idSelect}}</pre>
    <select ng-model="idSelect2" init-value="1" ng-options="item.id as item.name for item in options">
    </select>
    <pre>idSelect2={{idSelect2}}</pre>
  </div>
</div>

side_id = angular.element('#classified_side_id').val();

此外，我正在使用事件查找元素值的更改。

相关文章：