Question

我正在尝试使用angularjs将类添加到父项。我是棱角分明的新手，对jquery来说还不错。当文本框控件有ng更改时，是否有任何特定方法可以将父边框的父级边框添加到父级。这个场景来到我身边，因为我试图在ng-repeat中使用一个kendo日期选择器，并且必须添加一个红色边框来控制是否存在任何验证错误。 Telerik kendo datepicker将span作为父文本添加到文本框。所以在文本框中添加边框颜色红色没有任何意义，它必须是边框红色，以便为kendo datepicker动态添加父级。我试图使这个通用，以便在我的应用程序中使用相同的。

这是my fiddle

<div ng-controller="MyCtrl">
  <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid">
      <span class="k-picker-wrap k-state-default">
        <input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')">
      <span>
      <span unselectable="on" class="k-icon k-i-calendar">
      select
      </span>
  </span>

  <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid">
      <span class="k-picker-wrap k-state-default">
        <input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-0')">
      <span>
      <span unselectable="on" class="k-icon k-i-calendar">
      select
      </span>
  </span>
</div>

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
  $scope.addBorderToControl = function(controlName) {
    $('#' + controlName).element.parent().parent().addClass("validationControl");
  }
}

Answer 1

ng-change需要ng-model

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')" ng-model="model1">

你需要Jquery。

<强> fiddle

<强> ------------------------------------------- < /强>

修改

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-1')" ng-model="model2">

更改ng-change="addBorderToControl('endDateTextbox-0') 到ng-change="addBorderToControl('endDateTextbox-1')

<强> ------------------------------------------- < /强>

编辑2：

没有Jquery：

<强> fiddle

Answer 2

你有使用Angular v1.0.1的原因吗？

你破坏了HTML - 没有关闭<span>。

你正在重复我们所做的所有错误 - 弄乱控制器内部的DOM。你永远不应该这样做。

TL; DR 我根据前面的解释改变了你的jsFiddle：

http://jsfiddle.net/mickeyvip/kqzd5q98/3/

让我们分开任务：

jsFiddle缺少MyCtrl与角线的连线。你需要添加：

myApp.controller('MyCtrl', MyCtrl);

现在Angular可以找到你的MyCtrl并实际运行它。

但是Angular会对你大吼大叫，它找不到ngModel - $scope上的一个变量，Angular想要在更改<input>元素的值时设置：

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate">

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate">

接下来，我们会在输入更改时调用validateEndDate()，而不是addBorderToControl()。实际上我们根本不需要addBorderToControl()。

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate" ng-change="validateStartDate()">

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate" ng-change="validateEndDate()">

每个函数都会在$scope上设置正确变量的有效性：

 $scope.validateStartDate = function() {
    // validate $scope.startDate
    var isValid = $scope.startDate === 'start';
    $scope.startDateValid = isValid;
  }

$scope.validateEndDate = function() {
    // validate $scope.endDate
    var isValid = $scope.endDate === 'end';
    $scope.endDateValid = isValid;
  }

对于此示例，如果startDate等于"start"，则我会将endDate视为有效。如果"end"等于ng-class，我会将其视为<span>。

现在我们已经拥有了所有验证逻辑，我们将在您需要的ng-class上使用Angular的指令{{ }}。 true未在您的示例中正确使用，它期望在属性的值中使用表达式，因此无需将其包含在false中。我们将使用key =您的类名和布尔值给它一个对象，该值将决定我们是否要添加此类（<span class="k-widget k-datepicker k-header" ng-class="{validationControl: !startDateValid}"> <span class="k-widget k-datepicker k-header" ng-class="{validationControl: !endDateValid}">）或删除它（style="border: solid"）：

ByteBuddyAgent.install()

如您所见，我删除了Instrumentation，因为它会覆盖CSS中设置的边框样式。

就是这样。现在我们有一个工作示例，我们不操纵DOM，而只是执行业务逻辑。

希望它有所帮助。

AngularJS将css类添加到父div

2 个答案: