Javascript AngularJS将css类添加到父div

我试图用angularjs将类添加到父项中。我刚接触angular，对jquery有点了解。当文本框控件发生ng更改时，是否有任何特定的方法向父span的父级添加边框。当我试图在ng repeat中使用剑道日期选择器时，我想到了这个场景，并且必须添加一个红色边框来控制是否存在任何验证错误。Telerik kendo datepicker向textbox添加了一个span作为父级。所以在文本框中添加红色边框没有任何意义，它必须是动态添加的kendo datepicker父跨度的红色边框。我正试图使这个通用，以便同样可以通过我的应用程序使用

这是

---

ng变革需要ng模型

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

您需要Jquery

---------------------------------------

编辑：

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

change

ng change=“addBorderToControl（'endDateTextbox-0'）

至

ng change=“addBorderToControl（'endDateTextbox-1'）

---------------------------------------

编辑2:

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

没有Jquery：

---

天然气变化需要天然气型号

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

您需要Jquery

---------------------------------------

编辑：

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

change

ng change=“addBorderToControl（'endDateTextbox-0'）

至

ng change=“addBorderToControl（'endDateTextbox-1'）

---------------------------------------

编辑2:

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

没有Jquery：

---

使用Angular v1.0.1有什么原因吗

您已破坏HTML-未关闭

你在重复我们都犯过的错误——在控制器内部搞乱DOM。你不应该这样做

TL；博士 根据前面的解释，我已将您的JSFIDLE更改为工作模式：

让我们把任务分开：

JSFIDLE缺少将MyCtrl与angular相连接的功能。您需要添加：

myApp.controller('MyCtrl', MyCtrl);

现在，Angular可以找到MyCtrl并实际运行它

但是Angular会对您大喊大叫，说它找不到

ngModel

——当您更改

元素的值时，Angular想要在

$scope

上设置的变量：

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

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

每个函数将在

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

在这个例子中，如果

开始日期

等于

“开始”

，我将其视为有效；如果

结束日期

等于

“结束”

，我将其视为有效

现在我们已经准备好了所有的验证逻辑，我们将在您需要的

上使用Angular的指令

ng class

ng类

在您的示例中使用不正确，它需要在属性的值中包含一个表达式，因此无需将其包装在

{}

中。我们将给它一个key=your class name的对象和一个布尔值，它将决定我们是要添加这个类（

true

）还是删除它（

false

）：

正如您所见，我已经删除了

style=“border:solid”

，因为它覆盖了CSS中设置的边框样式

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

---

希望对您有所帮助。

您使用Angular v1.0.1有什么原因吗

您已破坏HTML-未关闭

你在重复我们都犯过的错误——在控制器内部搞乱DOM。你不应该这样做

TL；博士 根据前面的解释，我已将您的JSFIDLE更改为工作模式：

让我们把任务分开：

JSFIDLE缺少将MyCtrl与angular相连接的功能。您需要添加：

myApp.controller('MyCtrl', MyCtrl);

现在，Angular可以找到MyCtrl并实际运行它

但是Angular会对您大喊大叫，说它找不到

ngModel

——当您更改

元素的值时，Angular想要在

$scope

上设置的变量：

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

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

每个函数将在

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

在这个例子中，如果

开始日期

等于

“开始”

，我将其视为有效；如果

结束日期

等于

“结束”

，我将其视为有效

现在我们已经准备好了所有的验证逻辑，我们将在您需要的

上使用Angular的指令

ng class

ng类

在您的示例中使用不正确，它需要在属性的值中包含一个表达式，因此无需将其包装在

{}

中。我们将给它一个key=your class name的对象和一个布尔值，它将决定我们是要添加这个类（

true

）还是删除它（

false

）：

正如您所见，我已经删除了

style=“border:solid”

，因为它覆盖了CSS中设置的边框样式

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

---

希望对您有所帮助。

您想将类添加到文本框的父对象的父对象吗？是的。我正试着这么做。但是你的函数

MyCtrl

没有调用。我刚刚提醒了

controlName

，但什么也没发生。它为我处理了警报。是否要将父类添加到文本框的父类？是的。我正试着这么做。但是你的函数

MyCtrl

没有调用。我刚刚提醒了

controlName

，但什么也没发生。它为我处理了警报。我们可以用angular代替Jquery吗？我们可以用angular代替Jquery吗？