Lớp liên kết góc của phần tử với phần tử focus

Trong ứng dụng góc sau đây của tôi, tôi có nhiều hàng myelement (trình bao bọc chỉ thị góc trên input). Tại một thời điểm tôi cần phải tập trung/chọn/làm nổi bật một trong số đó, .selected lớp trong các phong cách làm điều đó.Lớp liên kết góc của phần tử với phần tử focus

Trong ứng dụng sau, mọi thứ hoạt động tốt ngoại trừ việc tập trung vào thẻ input cần được giới hạn bởi lớp css selected. I E. bất kỳ phần tử nào có lớp selected cần phải tập trung vào thẻ input tương ứng. Làm thế nào tôi có thể đạt được điều đó?

<!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>

Nguồn

2017-10-06 bruce_wayne

Không được ng-class = "{selected: listctrl.selected === $ index}" có dấu "?" ở giữa lựa chọn và listctrl.selected vì nó là một ternary? Hay tôi đọc sai. –

@Dream_Cap nó không phải là một thứ ba, chỉ là một đối tượng theo nghĩa đen – Phil

Bạn không thể sử dụng một cái gì đó như 'element.hasClass ('selected') && inputTag.focus()'? Bạn có thể cần đặt 'ưu tiên' của chỉ thị thành một cái gì đó lớn hơn' 0' để chức năng liên kết sau của nó chạy sau 'ngClass' – Phil

Hãy xem ví dụ sau. Nó sử dụng tính năng được đề nghị component của AngularJS (kể từ v1.5). Ví dụ này rất đơn giản để bạn có thể dễ dàng hiểu những gì đang xảy ra và cách áp dụng nó trong dự án của bạn.

Javascript

class MainController { 

    constructor() { 
     this.focused = true; 
    } 

} 

class MyElementController { 

    constructor($element) { 
     this.$element = $element; 
    } 

    $onChanges(changes) { 
     if (changes.focused.currentValue === true) { 
      this.$element[0].getElementsByTagName('input')[0].focus(); 
     } 
    } 

} 

const myElementComponent = { 
    bindings: { 
     focused: '<' 
    }, 
    controller: MyElementController, 
    template: `<input type="text">` 
}; 

angular 
    .module('app', []) 
    .controller('MainController', MainController) 
    .component('myElement', myElementComponent);

HTML

<body ng-app="app" ng-controller="MainController as vm"> 
    <my-element focused="vm.focused"></my-element> 
</body>

Nguồn

2017-10-09 14:48:44

var elementComponent = { 
 
bindings:{ 
 
    selected:'<' 
 
    }, 
 
    controller:function($element){ 
 
    this.$onChanges = function(changes) { 
 
     if(changes.selected.currentValue){ 
 
     $element[0].getElementsByClassName('textName')[0].focus() 
 
     } 
 
    } 
 
    }, 
 
    template:'<input type="text" class="textName" style="margin:4px">' 
 
}; 
 

 
var controller = function(){ 
 
    this.list = [1]; 
 
    this.selected = 1 
 
    this.add = function(){ 
 
    var length = this.list.length ; 
 
     this.list.push(length + 1); 
 
     this.selected = length + 1; 
 
    } 
 
}; 
 

 

 
angular.module('app', []) 
 
     .component('element', elementComponent) 
 
     .controller('appCtrl', controller);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 
<body ng-app="app" ng-controller="appCtrl as vm" > 
 
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script> 
 
    <button ng-click="vm.add()">Add New Cell</button> 
 
    <div ng-repeat="item in vm.list" > 
 
    <element selected="item == vm.selected" ng-click="vm.selected = item"></element> 
 
    </div> 
 
    Selected Element : {{vm.selected}} 
 
</body> 
 
</html>

này có thể điền vào yêu cầu của bạn.

Nguồn

2017-10-10 13:18:09

trên mỗi lần thực hiện/lên khóa, kiểm tra lớp và sử dụng tiêu điểm(), blur() để thay đổi trạng thái đầu vào. trong trường hợp nhân tab, preventDefault()

angular 
 
    .module('myApp',[]) 
 
    .controller('ListController', function($scope) { 
 
    var listctrl = this; 
 
    listctrl.list = ['1','2','3']; 
 
    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', 
 
     scope: {}, 
 
     link: function (scope, element, attrs) { 
 
     var inputTag = element[0].children[0]; 
 
     var updateFocues = function(element) { 
 
      if(element[0].className.indexOf('selected') !== -1) { 
 
      scope.$apply(function() { 
 
       inputTag.focus() 
 
      }); 
 
      } else { 
 
      scope.$apply(function() { 
 
       inputTag.blur() 
 
      }); 
 
      }  
 
     } 
 

 
     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'); 
 
      }else if (event.keyCode === 9) { 
 
      event.preventDefault(); 
 
      } 
 
     }); 
 
     
 

 
     scope.$on('keyUp', function() { 
 
      updateFocues(element) 
 
     }) 
 
     scope.$on('keyDown', function() { 
 
      updateFocues(element) 
 
     }) 
 
     }, 
 
     controller: function ($scope) { 
 

 
     } 
 
    }; 
 
    })

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

<!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> 
 

 
</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> 
 
</body> 
 
</html>

Nguồn

2017-10-13 07:38:19

Đề nghị bạn sử dụng css để thay thế (nhiều khả năng nó sẽ phù hợp với nhu cầu của bạn). Việc thêm mã JS phụ để hỗ trợ các hành vi đơn giản không phải là một thực hành tốt.

:focus selector explained on W3C

Ví dụ:

myelement input:focus { 
    border-style: solid; 
    border-color: green; 
    border-width: 1px; 
    border-left-width: 5px; 
}

Nguồn

2017-10-15 19:08:29

Lớp liên kết góc của phần tử với phần tử focus

Trả lời

Các vấn đề liên quan