Question

要求：选择单选按钮应带各自的输入框。下面是我的html和控制器的一部分。我正在使用ng-change来调用控制器中编写的函数。控制器中的函数只使用jquery显示div。 fyi，我的模板正在渲染，我没有看到控制台上的任何错误，控制器中的函数也被调用。

问题 - 在单击单选按钮上，相应的div未呈现。任何提示都受到高度赞赏。

<div ng-app="app" ng-controller="FestCtrl">
   <form name="addForm" class="form-horizontal" ng-submit="submitForm(fest)">
      <!-- Options to user to either enter a new role OR select from an existing     one's -->
      <div class="btn-group" data-toggle="buttons">
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newfest()"> New
         </label>
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option2" autocomplete="off" ng-model="value" ng-change="existingfest()"> Existing
         </label>
      </div>
      <br>
      <br>
      <!-- Respective input will be presented depending on above selection-->
      <div id="addNewDiv" class="form-group">
         <label class="control-label" for="InputId">New</label>
         <input required type="text" class="form-control" id="groupIdInput" placeholder="Insert new fest" ng-model="fest.role">
      </div>
      <div id="selectExistingDiv" class="form-group">
         <label for="select1">Select</label>
         <select ng-model="fest.role" class="form-control" id="select1" ng-options="val for val in festArray">
            <option value="">Select</option>
         </select>
      </div>
   </form>
</div> 



var app = angular.module('App');
app.controller('FestCtrl', ['$scope', '$state', function($scope, $state) {
    $(function() {
        $("[data-hide]").on("click", function() {
            $(this).closest("." + $(this).attr("data-hide")).hide();
        });
    });
    $("#addNewDiv").hide();
    $("#selectExistingDiv").hide();
    $scope.newRole = function() {
        $("#addNewDiv").show();
    }
    $scope.existingRole = function() {
        $("#selectExistingDiv").show();
    }
}]);

Answer 1

在这种情况下，您遇到的一个关键问题是您将jQuery与Angular结合使用。在其他有问题的领域中（在本问题Is that a good practice to use jQuery with AngularJS?中讨论），您通过引用$来与污染的全局范围进行交互。 Angular在其命名空间中使用了许多$ prefixed方法。

在角度控制器中，你甚至不会引用Window对象，这是jQuery将其命名空间（$）附加到的对象。在Angular中，如果需要对window对象的引用，可以使用$ window provider https://docs.angularjs.org/api/ng/service/$window。

最后，关于将jQuery与angular结合使用的主题，肯定有需要触摸DOM的实例。 Angular处理此问题的范例称为指令。指令不是非常容易理解，并且超出了这个答案的范围，但我鼓励您在这里阅读更多关于它们的信息 - ＆gt; https://docs.angularjs.org/guide/directive

这是一个如何运作的工作示例。

function FestController($scope) {

  $scope.state = {
    selected: 0,
    fest: {
      role: ""
    }
  };

}
angular.module("bacon", []);
angular.module("bacon").controller("FestController", FestController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bacon" ng-controller="FestController">
  {{state.selected}}
  <input type="number" ng-model="state.selected" />
  <form class="form-horizontal" id="addForm" name="addForm" ng-submit="submitForm(fest)">
    <!-- Options to user to either enter a new role OR select from an existing     one's -->
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input autocomplete="off" id="option1" name="options" ng-model="state.selected" ng-value="0" type="radio"> New</label>
      <label class="btn btn-primary">
        <input autocomplete="off" id="option2" name="options" ng-model="state.selected" ng-value="1" type="radio"> Existing</label>


    </div>
    <!-- Respective input will be presented depending on above selection-->

    <div class="animate-switch-container" ng-switch="state.selected">

      <div class="form-group" id="addNewDiv" ng-switch-when="0">
        <h1>
          {{state.fest.role}}
        </h1>
        <label class="control-label" for="InputId">New</label>
        <input class="form-control" id="groupIdInput" ng-model="state.fest.role" placeholder="Insert new fest" required="" type="text">
      </div>
      <div class="form-group" id="selectExistingDiv" ng-switch-when="1">

        <label for="select1">Select</label>
        <select class="form-control" id="select1" ng-model="state.fest.role" ng-options="val for val in festArray">
          <option value="">
            Select
          </option>
        </select>
      </div>
    </div>
  </form>
</div>

你可以看到我已经完全删除了对jQuery的任何引用，以及对直接DOM操作的任何引用。

我选择使用ng-switch内置角度指令，您可以在此处阅读https://docs.angularjs.org/api/ng/directive/ngSwitch

将状态移动到控制器内附加到$ scope的对象允许在模板中引用这些值，并允许双向绑定工作。

我还删除了控制器上的函数，以强调使用switch指令的双向绑定。当这些值在$ scope上更新时会发生填充。您是否选择依赖此特定实现是一个偏好和架构问题，但这是您完成任务的一种方式。

Answer 2

您的控制器中不存在newfest和existingfest方法。你有：

    $scope.newRole = function() {
        $("#addNewDiv").show();
    }
    $scope.existingRole = function() {
        $("#selectExistingDiv").show();
    }

更改

<input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newfest()">

到

<input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newRole()">

Angularjs，单选按钮选择以显示选择性div（有输入）不起作用

2 个答案: