표시된 데이터 간 전환

몇 시간 전에 AngularJS를 살펴보기 시작 했으므로 상황이 어떻게 작동하는지 알았습니다. 기본 예제의 일부로 표에 표시된 데이터를 전환하는 방법을 파악하려고합니다.표시된 데이터 간 전환

현재로서는 기본 앱으로 다음과 같은 항목이 있습니다.

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    </head> 

    <body> 
     <div ng-app="applicationMain" ng-controller="controllers.app.main"> 


      <table> 
       <tr ng-repeat="item in items"> 
        <button>Toggle</button> 
        <td>{{item.name}}<td> 
       </tr> 
      </table> 


     </div> 
    </body> 

    <script> 
     var controllers = { 
      app : { 
       main : function($scope){ 
        var s = $scope; 
        s.items = [ 
         { 
          name : "Pizza", 
          price : 100 
         }, 
         { 
          name : "Burger", 
          price : 45 
         }, 
         { 
          name : "Kebab", 
          price : 85 
         } 
        ]; 
       } 
      } 
     } 

     var app = angular.module("applicationMain", []); 
     app.controller('controllers.app.main', controllers.app.main); 


    </script> 
</html>

매우 간단합니다. 각 테이블의 이름이 테이블에 표시되는 이름 및 가격 필드가있는 범위가 지정된 개체 배열 ng-repeat

토글 단추를 클릭하면 항목 데이터가 전환됩니다. name을 item.price의 데이터를 표시하는 데 사용합니다.

<TD> 태그의 각 표현식 내에서 수행 할 수있는 것입니까, 아니면 기능이 갈 길입니까?

예를 들어 일반 JS를 사용했다면 다음과 같이 할 수 있습니다. $의 scope.item 그것을 정의하는 경우에도

var activeField = item.name; 
if (activeField == item.name){ 
    activeField = item.price 
} else { 
    activeField = item.name 
}

그러나, 나는 내 컨트롤러에 'switchField'기능을 만들어 비슷한하지만 (기본적으로 범위 지정 문제를) '항목이 정의되지 않은'고 각도 보고서를 시도했다. 가격 및 $ scope.item.name 각각.

<table> 
     <tr ng-repeat="item in items"> 
      <button ng-click="toggleIt()">Toggle</button> 
      <td ng-show="toggle">{{item.name}}<td> 
      <td ng-hide="toggle">{{item.price}}<td> 
     </tr> 
    </table>

을 그리고 컨트롤러에이 추가 :

출처

2017-02-19 Scott Pritchard

당신은 ngClick, ngShow 및 ngHide를 사용하여, 같은 것을 할 수

 s.toggle = true; 

     s.toggleIt = function() { 
      s.toggle = !s.toggle; 
     }

출처

2017-02-19 01:12:40 Serylo

작품을 멋지고! 단일 TD로 유지하고 내부 수정을 원했지만 간단하고 우아합니다. 방금 조금 수정했고 ng-click 버튼에서 단순히 "toggle =! toggle"을 호출하면 작동합니다 (그리고 컨트롤러의 함수는 필요하지 않습니다). –

단일 TD로 유지하려면 다음을 시도하십시오.

– Serylo

표시된 데이터 간 전환

답변

관련 문제