C# 如果使用Angularjs ng repeat,则JQuery无法处理输入标记
我正在使用angularjs和asp.NETCore2.2。我正在使用的主题中的jQuery与angularjs冲突。删除angular后,jQuery工作正常。我将引导选择放置在ng repeat中,它不起作用 删除表上的angularjs ng repeat后,所有jQuery元素都能正常工作,否则就无法正常工作 这是我的HTML代码C# 如果使用Angularjs ng repeat,则JQuery无法处理输入标记,c#,asp.net,angularjs,asp.net-core,asp.net-core-2.2,C#,Asp.net,Angularjs,Asp.net Core,Asp.net Core 2.2,我正在使用angularjs和asp.NETCore2.2。我正在使用的主题中的jQuery与angularjs冲突。删除angular后,jQuery工作正常。我将引导选择放置在ng repeat中,它不起作用 删除表上的angularjs ng repeat后,所有jQuery元素都能正常工作,否则就无法正常工作 这是我的HTML代码 <div class="kt-portlet"> <div class="kt-portlet__head">
<div class="kt-portlet">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3 class="kt-portlet__head-title">
Suit Information
</h3>
</div>
</div>
<div class="kt-portlet__body">
<!--begin::Section-->
<div class="kt-section">
<div class="kt-section__content">
<table class="table">
<thead class="thead-dark">
<tr>
<th style="text-align:center; vertical-align:middle;">
<label class="kt-checkbox kt-checkbox--bold">
<input type="checkbox"
ng-model="selectedAll"
ng-click="CheckAll()">
<span></span>
</label>
</th>
<th>Suit Type</th>
<th>Quantity</th>
<th>Stitching Price</th>
<th>Receiving Date</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in SuitList">
<td>
<label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
<input type="checkbox" ng-model="item.selected">
<span></span>
</label>
</td>
<td>
<div class="col-lg-12">
<select class="form-control kt-selectpicker" title="Brand" data-style="btn-brand">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<span class="form-text text-muted">Please select Suit Type</span>
</div>
</td>
<td>
<input id="" type="number" min="0" class="form-control" value="0" name="demo1" placeholder="Price">
<span class="form-text text-muted">Please enter Quantity</span>
</td>
<td>
<input id="" type="number" min="0" class="form-control" value="0"
name="demo1" placeholder="Price">
<span class="form-text text-muted">Please enter stitching price</span>
</td>
<td>
<div class="input-group date">
<input type="date" class="form-control" placeholder="Select date" id="" />
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o"></i>
</span>
</div>
</div>
</td>
<td>
<div class="input-group date">
<input type="date" class="form-control" placeholder="Select date" id="" />
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o"></i>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-hide="!SuitList.length" type="button" class="btn btn-danger pull-right" ng-click="Remove()" value="Remove Selected">
<input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="AddNew()" style="margin-right:3px">
</div>
</div>
<!--end::Section-->
</div>
</div>
var KTBootstrapSelect = function () {
var demos = function () {
// minimum setup
$('.kt-selectpicker').selectpicker();
}
return {
// public functions
init: function() {
demos();
}
};
}();
jQuery(document).ready(function() {
KTBootstrapSelect.init();
});
$scope.AllowAddNewRow = true;
$scope.selectedAll = false;
$scope.AddNew = function () {
if ($scope.SuitList.length == 0) {
$scope.SuitList.push({
'Suit_Id': 0,
'SuitType_Id': 0,
'Suit_Quntity': 0,
'Suit_Stiching': 0,
'Order_Receiving_Date': "",
'Order_Delivery_Date': "",
});
}
for (var i = 0; i < $scope.SuitList.length; i++)
{
if ($scope.SuitList[i].Suit_Quntity == 0 || $scope.SuitList[i].Suit_Stiching == 0 || $scope.SuitList[i].Order_Receiving_Date == "" || $scope.SuitList[i].Order_Delivery_Date == "")
{
$scope.AllowAddNewRow = false;
return;
}
else
$scope.AllowAddNewRow = true;
}
if ($scope.AllowAddNewRow == true) {
$scope.SuitList.push({
'Suit_Id': 0,
'SuitType_Id': 0,
'Suit_Quntity': 0,
'Suit_Stiching': 0,
'Order_Receiving_Date': "",
'Order_Delivery_Date': "",
});
}
};
这是角度JS代码
<div class="kt-portlet">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3 class="kt-portlet__head-title">
Suit Information
</h3>
</div>
</div>
<div class="kt-portlet__body">
<!--begin::Section-->
<div class="kt-section">
<div class="kt-section__content">
<table class="table">
<thead class="thead-dark">
<tr>
<th style="text-align:center; vertical-align:middle;">
<label class="kt-checkbox kt-checkbox--bold">
<input type="checkbox"
ng-model="selectedAll"
ng-click="CheckAll()">
<span></span>
</label>
</th>
<th>Suit Type</th>
<th>Quantity</th>
<th>Stitching Price</th>
<th>Receiving Date</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in SuitList">
<td>
<label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
<input type="checkbox" ng-model="item.selected">
<span></span>
</label>
</td>
<td>
<div class="col-lg-12">
<select class="form-control kt-selectpicker" title="Brand" data-style="btn-brand">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<span class="form-text text-muted">Please select Suit Type</span>
</div>
</td>
<td>
<input id="" type="number" min="0" class="form-control" value="0" name="demo1" placeholder="Price">
<span class="form-text text-muted">Please enter Quantity</span>
</td>
<td>
<input id="" type="number" min="0" class="form-control" value="0"
name="demo1" placeholder="Price">
<span class="form-text text-muted">Please enter stitching price</span>
</td>
<td>
<div class="input-group date">
<input type="date" class="form-control" placeholder="Select date" id="" />
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o"></i>
</span>
</div>
</div>
</td>
<td>
<div class="input-group date">
<input type="date" class="form-control" placeholder="Select date" id="" />
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o"></i>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-hide="!SuitList.length" type="button" class="btn btn-danger pull-right" ng-click="Remove()" value="Remove Selected">
<input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="AddNew()" style="margin-right:3px">
</div>
</div>
<!--end::Section-->
</div>
</div>
var KTBootstrapSelect = function () {
var demos = function () {
// minimum setup
$('.kt-selectpicker').selectpicker();
}
return {
// public functions
init: function() {
demos();
}
};
}();
jQuery(document).ready(function() {
KTBootstrapSelect.init();
});
$scope.AllowAddNewRow = true;
$scope.selectedAll = false;
$scope.AddNew = function () {
if ($scope.SuitList.length == 0) {
$scope.SuitList.push({
'Suit_Id': 0,
'SuitType_Id': 0,
'Suit_Quntity': 0,
'Suit_Stiching': 0,
'Order_Receiving_Date': "",
'Order_Delivery_Date': "",
});
}
for (var i = 0; i < $scope.SuitList.length; i++)
{
if ($scope.SuitList[i].Suit_Quntity == 0 || $scope.SuitList[i].Suit_Stiching == 0 || $scope.SuitList[i].Order_Receiving_Date == "" || $scope.SuitList[i].Order_Delivery_Date == "")
{
$scope.AllowAddNewRow = false;
return;
}
else
$scope.AllowAddNewRow = true;
}
if ($scope.AllowAddNewRow == true) {
$scope.SuitList.push({
'Suit_Id': 0,
'SuitType_Id': 0,
'Suit_Quntity': 0,
'Suit_Stiching': 0,
'Order_Receiving_Date': "",
'Order_Delivery_Date': "",
});
}
};
$scope.allowadnewrow=true;
$scope.selectedAll=false;
$scope.AddNew=函数(){
如果($scope.SuitList.length==0){
$scope.SuitList.push({
“西服Id”:0,
“SuiteType\u Id”:0,
“诉讼数量”:0,
“西服粘贴”:0,
“订单接收日期”:“,
“订单交货日期”:“,
});
}
对于(变量i=0;i<$scope.SuitList.length;i++)
{
如果($scope.SuitList[i]。Suit|quantity==0 | |$scope.SuitList[i]。Suit|Stiching==0 | |$scope.SuitList[i]。订单| | |$scope.SuitList[i]。订单|交货|日期==“”)
{
$scope.allowadnewrow=false;
回来
}
其他的
$scope.allowadnewrow=true;
}
如果($scope.allowadnewrow==true){
$scope.SuitList.push({
“西服Id”:0,
“SuiteType\u Id”:0,
“诉讼数量”:0,
“西服粘贴”:0,
“订单接收日期”:“,
“订单交货日期”:“,
});
}
};
我希望多行具有jQuery功能,但无法获取。您需要创建一个angularjs指令来初始化选择器选择器,如下所示
angular.module('app').directive("ktSelectpicker", [
() => {
return {
restrict: "C",
link: ($scope, element) => {
$(element).selectpicker();
}
}
}
])
将
'app'
替换为您的模块名如何创建id为的指令?无法为id创建指令,指令只能限于类、属性和标记名