Question

我有一个由rails scaffolding生成的表单，它可以正常工作。我想在此表单中添加一个新的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">

Answer 1

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

此外，我一直在使用事件来更改元素值。

Answer 2

您可以使用ngModel的默认值为html中的初始值创建指令。

jsfiddle上的实例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: