AngularJS在點擊時更改控制器中的部分

我正在使用儀表板應用程序，您在其中同時顯示一組模塊。我想爲這些模塊添加多個「視圖」。例如，Github模塊的第一個視圖就是你的倉庫列表。當您單擊該模塊中的存儲庫鏈接時，模塊中的該視圖將被替換爲顯示關於該回購的所有詳細信息的新屏幕。AngularJS在點擊時更改控制器中的部分

但是，我希望在此模塊中將此視圖隔離，以便我可以同時繼續使用其他模塊（我根本不想切換頁面）。

的我想要實現的一個例子可以在這裏找到：http://jsfiddle.net/5LgCZ/

在這個例子中，你可以點擊一個水果或汽車，並獲取有關該物品在該模塊中詳細信息在一個新的視圖。（它目前只是執行警報）。

這是我到目前爲止，但我不知道如何組織並儘可能的控制器和視圖去接近這一點：提前

<div ng-app="app"> 
    <div class="module" ng-controller="FruitCtrl"> 
     <h1>Fruit Module</h1> 
     <ul> 
      <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
     </ul> 
    </div> 
    <div class="module" ng-controller="CarCtrl"> 
     <h1>Car Module</h1> 
     <ul> 
      <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li> 
     </ul> 
    </div> 
</div>

感謝的人誰就能幫助。

來源

2013-05-20 thomastuts

只是爲了澄清，你想點擊你的網頁上的一個'節'，刷新另一個'節'給用戶的點擊？ –

我不完全確定你的意思是new view，可能有幾種方法可以做到這一點，但只是爲了讓你從最簡單的一個（在我看來）開始，你可以有一個細節元素每個你展示基於選擇/隱藏模塊：

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <ul ng-show='!fruitSelected'> 
     <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
    </ul> 
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div> 
</div> 

function FruitCtrl($scope) { 
    $scope.fruits = ['Banana', 'Orange', 'Apple']; 
    $scope.fruitSelected = false; 
    $scope.showDetail = function (fruit) { 
     $scope.fruitSelected = fruit; 
    } 
}

來源

2013-05-20 14:29:29 lucuma

如果您wan't是相同的HTML元素中顯示的一對夫婦的狀態，您可以利用內置的ng-switch指令。這將允許您切換元素的內容，同時保持相同的$scope，以便您可以輕鬆地在這些狀態之間共享數據。

這裏是您更新的小提琴：http://jsfiddle.net/dVFeN/及以下的解釋。

在您的例子的情況下，它可能是這樣的：

HTML

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <div ng-switch="moduleState"> 
     <div ng-switch-when="list"> 
      <ul> 
       <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
      </ul> 
     </div> 
     <div ng-switch-when="details"> 
      <p>Details for {{ selectedFruit }}</p> 
      <a href="#" ng-click="showList()">Back to list</a> 
     </div> 
    </div> 
</div>

稱爲moduleState額外的變量定義窗口小部件的當前狀態。感謝ng-switch指令，外部div的內容根據傳遞給它們的ng-switch-when屬性的值自動在內部元素之間切換。

function FruitCtrl($scope) 
{ 
    $scope.moduleState = 'list'; 

    $scope.fruits = ['Banana', 'Orange', 'Apple']; 

    $scope.showDetail = function(fruit) 
    { 
     $scope.selectedFruit = fruit; 

     $scope.moduleState = 'details'; 
    }; 

    $scope.showList = function() 
    { 
     $scope.moduleState = 'list'; 
    }; 
}

所有您需要做的，是修改moduleState變量，它會自動顯示所需的小部件瀏覽的價值。此外，引入的selectedFruit變量保存要在詳細信息視圖中執行的項目引用。

使用ng-switch指令的好處是您可以以一致的方式輕鬆地爲您的小部件添加任意數量的狀態。

您可以相應地修改您的第二個模塊。

來源

2013-05-20 14:30:14 mirrormx

Yuo絕對提供了一個更強大的例子。 – lucuma

AngularJS在點擊時更改控制器中的部分

回答

相關問題