AngularJS-根據選擇值顯示數據

Question

我正在開發一個具有兩種狀態的Angular應用： home和list 。

“主頁”視圖具有創建“列表”並顯示已創建的“列表”的表單。

“列表”視圖基於參數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)
            });
        };
    }

]);

static / 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

根據這個答案，我終於能夠使它正常工作。

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

])

因此，我幾乎不得不將所有“列表”邏輯和功能移入我的“主”控制器中，以便在“主”視圖中使用它。

這似乎是無組織的，並且可能不是最佳實踐，因此請多多指教。