7
मेरी निम्नलिखित कोणीय आवेदन में, मैं (input से अधिक टैग कोणीय निर्देश आवरण) myelement की कई पंक्तियां। एक समय में मुझे इसमें से किसी एक को ध्यान केंद्रित/चयन/हाइलाइट करने की आवश्यकता है, शैलियों में .selected वर्ग ऐसा करता है।कोणीय बाँध वर्ग ध्यान केंद्रित
निम्नलिखित अनुप्रयोग में, input टैग पर ध्यान केंद्रित करने के अलावा सब कुछ ठीक काम करता है, जिसे सीएसएस कक्षा selected द्वारा बाध्य करने की आवश्यकता है। अर्थात। जो भी तत्व वर्ग selected संबंधित input टैग केंद्रित होना चाहिए। मैं इसे कैसे प्राप्त कर सकता हूं?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.container {
display: flex;
flex-direction: column;
width: 600px;
}
.notebook {
display: flex;
justify-content: center;
}
.cell {
margin: 5px;
padding: 5px;
}
.selected {
border-style: solid;
border-color: green;
border-width: 1px;
border-left-width: 5px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl" class="notebook">
<div class="container">
<myelement ng-repeat="i in listctrl.list"
ng-click="listctrl.selected = $index"
ng-class="{selected : listctrl.selected === $index}"
class="cell"></myelement>
</div>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = [];
listctrl.selected = 0;
listctrl.addCell = function() {
var x = listctrl.list.length;
listctrl.list.push(x);
listctrl.selected = listctrl.list.length - 1;
}
listctrl.addCell();
$scope.$on('add', function (event, message) {
$scope.$apply(listctrl.addCell);
});
$scope.$on('keyUp', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected - 1;
});
});
$scope.$on('keyDown', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected + 1;
});
});
})
.directive('myelement', function($rootScope){
return {
template: '<input style="width: 95%"></input>',
restrict: 'E',
link: function (scope, element, attrs) {
var inputTag = element[0].children[0];
inputTag.focus();
element.on('keydown', function(event) {
if (event.keyCode === 13 && event.shiftKey) {
$rootScope.$broadcast('add');
} else if (event.keyCode === 38) {
$rootScope.$broadcast('keyUp');
} else if (event.keyCode === 40) {
$rootScope.$broadcast('keyDown');
}
});
},
controller: function ($scope) {
}
};
})
</script>
</body>
</html>
एनजी-श्रेणी = "{चयनित: listctrl.selected === $ अनुक्रमणिका}" होना चाहिए "?" चयनित और listctrl के बीच में। यह एक टर्नरी के बाद से चुना गया है? या मैं इसे गलत पढ़ रहा हूँ। –
@Dream_Cap यह एक टर्नरी नहीं है, केवल एक ऑब्जेक्ट शाब्दिक – Phil
क्या आप 'element.hasClass ('चयनित') और inputTag.focus()' जैसे कुछ का उपयोग नहीं कर सकते? आपको अपने निर्देश की 'प्राथमिकता' को '0' से अधिक कुछ सेट करने की आवश्यकता हो सकती है, इसलिए उसका पोस्ट-लिंक फ़ंक्शन' ngClass' के बाद चलता है – Phil