AngularJS - Показать данные на основе значения выбора

Question

Я работаю над Угловым приложением, которое состоит из двух состояний: и содержит.

«Домашний» вид имеет форму для создания «списков» и отображения «списков», которые были созданы.

В представлении «Списки» отображается содержимое определенного списка на основе идентификатора параметра (например, #/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 = ''; 
     }; 
    } 

]) 

Так что я довольно много пришлось перенести всю логику и функциональность 'список' в моей 'основной' контроллер чтобы использовать его в «главном» представлении.

Это кажется неорганизованным и, вероятно, не лучшей практикой, поэтому любые советы или советы приветствуются.