Question

我正在尝试使用Angular来更新具有特定类的所有输入值，如果未检查另一个输入。

HTML：

        <input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset()"> My Legal Business Name and/or Legal Business Address are different.
        <section class="form-show" ng-show="user.diffPhysicalLegal">
            <input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name" ng-required="user.diffPhysicalLegal == true"></br>
            <input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address" ng-required="user.diffPhysicalLegal == true"></br>
            <input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code" ng-required="user.diffPhysicalLegal == true">
        </section>

这是我尝试写的功能：

app.js

$scope.inputReset = function(){
    if(!$('.form-optional').is(':checked') {
      $(this).parent().find('.optional-element').val(null);
    }
}

这不起作用，我也无法弄清楚如何实现这一目标。我是Angular的新手，所以我仍然不熟悉如何在我的app.js文件中实现jQuery，或者我甚至需要jQuery来实现这一点。

Answer 1

在ng-change函数上下文this引用$scope对象但不引用DOM元素。如果您想坚持某个类的DOM操作，您可以考虑以下更改：

1）传递section元素容器标识符（例如类名）

ng-change="inputReset('section.form-show')"

2）选择并重置输入元素值，如下所示：

$scope.inputReset = function (contanerId) {
  if(!$scope.user.diffPhysicalLegal){         
     $(contanerId).find('input.optional-element').val(null); //not recommended: DOM manipulation
  }
}

<强>演示

angular.module('sampleApp', [])

  .controller('sampleCntrl', function ($scope) {


    $scope.inputReset = function (contaner_id) {
      if(!$scope.user.diffPhysicalLegal){         
         $(contaner_id).find('input.optional-element').val(null); //not recommended: DOM manipulation
      }
    }

  });

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="sampleApp" ng-controller="sampleCntrl">

		<input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset('section.form-show')">		My Legal Business Name and/or Legal Business Address are different.
		<section class="form-show" ng-show="user.diffPhysicalLegal">
			<input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name"
				ng-required="user.diffPhysicalLegal == true"></br>
			<input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address"
				ng-required="user.diffPhysicalLegal == true"></br>
			<input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code"
				ng-required="user.diffPhysicalLegal == true">
		</section>

	</div>

以下示例演示了如何在没有直接DOM操作的情况下重置输入元素值的替代方法

angular.module('sampleApp', [])

  .controller('sampleCntrl', function ($scope) {


    $scope.inputReset = function () {
      if(!$scope.user.diffPhysicalLegal){         
         $scope.user.legalName = "";
         $scope.user.legalMailingAddress = "";
         $scope.user.legalCityStateZip = "";
      }
    }

  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCntrl">

		<input type="checkbox" class="form-optional" ng-model="user.diffPhysicalLegal" name="diff-physical-legal" ng-change="inputReset()">		My Legal Business Name and/or Legal Business Address are different.
		<section class="form-show" ng-show="user.diffPhysicalLegal">
			<input class="optional-element" type="text" ng-model="user.legalName" name="legal-name" placeholder="Legal Business Name"
				ng-required="user.diffPhysicalLegal == true"></br>
			<input class="optional-element" type="text" ng-model="user.legalMailingAddress" name="mailing-address" placeholder="Mailing Legal Business Address"
				ng-required="user.diffPhysicalLegal == true"></br>
			<input class="optional-element" type="text" ng-model="user.legalCityStateZip" name="legal-city-state-zip" placeholder="City, State, and Zip Code"
				ng-required="user.diffPhysicalLegal == true">
		</section>

	</div>

AngularJS - 更改某个类的所有输入的值

1 个答案: