AngularJS - 基於選擇值顯示數據

Question

我正在開發一個有兩個狀態的角度應用程序：主頁和列表。

'家'視圖有一個窗體來創建'列表'，並顯示已創建的'列表'。 '列表'視圖根據參數ID（例如＃/ lists0，＃/ lists1，＃/ lists2等）顯示特定列表的內容。

我試圖讓選定的列表內容基於選擇框的值顯示在'home'視圖上。

這裏是我到目前爲止，

的js/app.js

angular.module('d-angular', ['ui.router']) 

// Set routing/configuration 
// ------------------------------ 
.config(['$stateProvider', '$urlRouterProvider', 

    // Set state providers 
    function($stateProvider, $urlRouterProvider) {$stateProvider 

     // Home state 
     .state('home', { 
      url: '/home', 
      templateUrl: '/static/home.html', 
      controller: 'MainCtrl' 
     }) 

     // Lists state 
     .state('lists', { 
      url: '/lists{id}', 
      templateUrl: '/static/lists.html', 
      controller: 'ListsCtrl' 
     }) 

     $urlRouterProvider.otherwise('home'); 
    } 
]) 


// lists factory 
// Factories are used to organize and share code across the app. 
// ------------------------------ 
.factory('lists', [function(){ 

    // create new obect with array of lists 
    var o = { lists: [] }; 
    return o; 

}]) 


// Main controller 
// ------------------------------ 
.controller('MainCtrl', ['$scope', 'lists', 

    // Main scope (used in views) 
    function($scope, lists){ 

     // array of lists 
     $scope.lists = lists.lists; 

     // Add list function 
     $scope.addList = function(){ 
      // prevent empty titles 
      if(!$scope.title || $scope.title === '') { 
       return; 
      } 
      // push new list to array 
      $scope.lists.push({ 
       title: $scope.title, 
       date: new Date().toJSON().slice(0,10), 
       words: [ 
         // add default words 
         { title: "no", date: new Date().toJSON().slice(0,10) }, 
         { title: "yes",  date: new Date().toJSON().slice(0,10) } 
         ] 
      }); 

      // reset title 
      $scope.title = ''; 
     }; 
    } 

]) 

// Lists controller 
// ------------------------------ 
.controller('ListsCtrl', ['$scope', '$stateParams', 'lists', '$http', 

    // Main scope (used in views) 
    function($scope, $stateParams, lists, $http){ 
     // get list by ID 
     $scope.list = lists.lists[$stateParams.id]; 

     // Add comment function 
     $scope.addWord = function(){ 

      // push new list to array 
      $scope.list.words.push({ 
       title: $scope.title, 
       date: new Date().toJSON().slice(0,10) 
      }); 
     }; 
    } 

]); 

靜態/ home.html的

<div class="page-header"> 
    <h1>Lists</h1> 
</div> 

<!-- add a list --> 
<form ng-submit="addList()"> 
    <input type="text" ng-model="title"></input> 
    <button type="submit">Add</button> 
</form> 
<!-- end add --> 

<!-- list all lists --> 
<select ng-model="lists" ng-options="list.id as list.title for list in lists"> 
    <option value="">Select List</option> 
</select> 
<!-- end list --> 

<!-- list words in selected list --> 
<div ng-repeat="list in lists{{$index}}"> 

    <div ng-repeat="word in list.words"> 
    {{ word.title }} <br> 
    {{ word.date }} 
    </div> 

    <hr> 
</div> 
<!-- end words --> 

我不知道怎麼去具體選擇框中的ID值，並用它來顯示特定的列表內容。

任何幫助表示讚賞。

Answer 1

我終於可以得到這個工作，根據this答案。

靜態/ main.html中

<div ng-controller="MainCtrl"> 

    {{ list.title }} 

    <!-- add a list --> 
    <form ng-submit="addList()"> 
    <input type="text" ng-model="title"></input> 
    <button type="submit">Add</button> 
    </form> 
    <!-- end add --> 

    <!-- list all lists --> 
    <select ng-model="list" ng-options="list as list.title for list in lists"> 
     <option value="">Select List</option> 
    </select> 
    <!-- end list --> 

    <hr> 

    <table> 
    <tr ng-repeat="word in list.words | orderBy: 'date':true"> 
     <td>{{word.title}}</td> 
     <td>{{word.date}}</td> 
    </tr> 
    </table> 

</div> 

的js/app.js

angular.module('d-angular', ['ui.router']) 

// Set routing/configuration 
// ------------------------------ 
.config(['$stateProvider', '$urlRouterProvider', 

    // Set state providers 
    function($stateProvider, $urlRouterProvider) {$stateProvider 

     // Home state 
     .state('home', { 
      url: '/home', 
      templateUrl: '/static/home.html', 
      controller: 'MainCtrl' 
     }) 

     // Lists state 
     .state('lists', { 
      url: '/lists{id}', 
      templateUrl: '/static/lists.html', 
      controller: 'ListsCtrl' 
     }) 

     $urlRouterProvider.otherwise('home'); 
    } 
]) 


// lists factory 
// Factories are used to organize and share code across the app. 
// ------------------------------ 
.factory('lists', [function(){ 

    // create new obect with array of lists 
    var o = { lists: [] }; 
    return o; 

}]) 


// Main controller 
// ------------------------------ 
.controller('MainCtrl', ['$scope', '$stateParams', 'lists', 

    // Main scope (used in views) 
    function($scope, $stateParams, lists){ 

     // array of lists 
     $scope.lists = lists.lists; 

     // get list by ID 
     $scope.list = lists.lists[$stateParams.id]; 

     // Add list function 
     $scope.addList = function(){ 
      // prevent empty titles 
      if(!$scope.title || $scope.title === '') { 
       return; 
      } 
      // push new list to array 
      $scope.lists.push({ 
       title: $scope.title, 
       date: new Date().toJSON().slice(0,10), 
       words: [ 
         // add default words 
         { title: "no", date: new Date().toJSON().slice(0,10) }, 
         { title: "yes",  date: new Date().toJSON().slice(0,10) } 
         ] 
      }); 

      // reset title 
      $scope.title = ''; 
     }; 
    } 

]) 

所以我幾乎已經給所有的 '名單' 的邏輯和功能的移動到我的 '主' 控制器以便在「主」視圖中使用它。

這似乎是無組織的，可能不是最佳實踐，所以任何建議或技巧，讚賞。