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 = ''; 
     }; 
    } 

]) 

所以我几乎已经给所有的 '名单' 的逻辑和功能的移动到我的 '主' 控制器以便在“主”视图中使用它。

这似乎是无组织的，可能不是最佳实践，所以任何建议或技巧，赞赏。