일부 조건의 경우에만 HTML 요소 속성을 만들 수 있습니까?

콜백 설정과 같은 요소 속성을 제외하거나 포함하여 html 요소 작성 시간을 결정할 수 있습니까?일부 조건의 경우에만 HTML 요소 속성을 만들 수 있습니까?

ng-repeat 흐름을 사용할 때 close-callback 핸들러로 html 요소를 만들고 싶을 때가 있고 어떤 경우에는 요소에 close 핸들러 정의가 없어야하는 경우가 있습니다.

<div ng-repeat="item in ctrl.items" 
close="ctrl.close()">XYZ</div>

... 또는 콜백없이 ..

<div ng-repeat="item in ctrl.items">XYZ</div>

... 아마 뭔가 같은 NG-경우? 그게 가능한가? 점검 조건은 항목 자체에 있습니다. 그래서 NG 반복 동안 나는 같은 일부 항목을 내부 상태를 확인해야합니다 :이 조건 검사를 추가 할 수 있으며 내가 수행 방법 가까운 핸들러가 추가 여부를

item.state === 'state1' ? add close handler : do nothing ...

닫기 가능한 항목은 색의 것이며 onclick 이벤트 리스너를 (그것을 클릭하려고)이 있습니다

건배

출처

2017-12-07 ArgV

ng-show를 사용하고 싶지만 ng-if도 작동합니다. – Luca

angularjs 또는 angular입니까? 당신은 각으로 태그를 붙 였지만 그것은 angularj를 찾고있는 것 같습니다. –

당신은이 문제를 해결하기 위해 사용자 정의 지시어를 사용할 수 있습니다, 여기에 예입니다.

닫을 수있는 항목 상태는 closable-state 속성 값과 일치해야합니다. 식으로 평가에 beeing value을 방지하기 위해 closable-state="'value'"를 사용하는 경우

당신은 값 주위에 작은 따옴표를 사용해야합니다.

값이 하드 코딩 된 문자열 인 경우 state: "=closableState"을 지시문에서 제거하고 attrs.closableState을 사용하여 특성 값을 검색하면됩니다.

희망이 있습니다.

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .controller('ExampleController', ['$scope', function ($scope) { 
 
     $scope.items = [ 
 
      { label: "item1", state: "state1" }, 
 
      { label: "item2", state: "state2" }, 
 
      { label: "item3", state: "state1" }, 
 
     ]; 
 
    }]) 
 
    .directive('closable', function() { 
 
     return { 
 
      restrict: 'A', 
 
      scope: { 
 
       item: "=closable", 
 
       state: "=closableState", 
 
      }, 
 
      link: function (scope, element, attrs) { 
 

 
       var clickListener = function (event) { 
 
        alert("I'm closable !"); 
 
       } 
 

 
       if (scope.item && scope.item.state === scope.state) { 
 
        element.addClass("colored"); 
 
        element.bind("click", clickListener); 
 
       } 
 
      } 
 
     }; 
 
    });

.colored { color: red }

<!doctype html> 
 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body ng-controller="ExampleController"> 
 
    <ul> 
 
    <li ng-repeat="item in items" closable="item" closable-state="'state1'">{{item.label}}</li> 
 
    </ul> 
 
</body> 
 
</html>

출처

2017-12-07 12:53:48

@Argv 질문에 대한 답변을 했습니까? –

는 Logical Operator Short Circuit Evaluation 활용 :

<div ng-repeat="item in ctrl.items" 
    close="item.closable && ctrl.close()">XYZ</div>

item.closable가 ctrl.close() 기능은 평가되지 않습니다 false입니다. 따라서이 함수는 item.closable의 값을 기준으로 조건부로 평가됩니다.

출처

2017-12-07 21:17:43 georgeawg

일부 조건의 경우에만 HTML 요소 속성을 만들 수 있습니까?

답변

관련 문제