AngularJS - Display data based on select value

Question

I'm working on an Angular app that has two states: home, and lists.

The 'home' view has a form to create 'lists', and display 'lists' that have been created.

The 'lists' view displays the contents of a specific list based on the parameter ID (e.g. #/lists0, #/lists1, #/lists2, etc...).

I'm trying to get the selected list contents to be displayed on the 'home' view based on the select box value.

Here is what I have so far,

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

I'm not sure how to get the specific ID value from the select box and use it to display a specific lists content.

Any help is appreciated.

I'm not sure how to transfer the ID value from the select box to render words in a specific list. I'm not getting any errors with the above code but when I select a value, nothing in the list renders — Kyle, May 02 '15 at 01:44

score 0 · Answer 1 · edited May 23 '17 at 10:24

I was able to get this working finally, based on this answer.

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

])

So I pretty much had to move all of the 'list' logic and functionality into my 'main' controller in order to use it in the 'main' view.

This seems unorganized and probably not best practice so any advice or tips are appreciated.

AngularJS - Display data based on select value

1 Answers1