AngularJS - 根据选择值显示数据

Question

我正在开发一个具有两种状态的 Angular 应用程序：home 和 lists。

“主页”视图具有创建“列表”的表单，并显示已创建的“列表”。

“列表”视图根据参数 ID（例如 #/lists0、#/lists1、#/lists2 等）显示特定列表的内容。

我正在尝试根据选择框的值将选定的列表内容显示在“主页”视图上。

这是我目前所拥有的，

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

])

所以我几乎不得不将所有“列表”逻辑和功能移到我的“主”控制器中，以便在“主”视图中使用它。

这似乎杂乱无章，可能不是最佳实践，因此欢迎任何建议或提示。