Display list of items and edit them via AngularJS

Question

I try to solve a classic problem using AngularJS: I need to display list of some entities and provide ability to add, edit and view details of this entities.

I implement two controllers: ListController to iterate list of entities and ItemController to display and save entity details. This is html code:

<div ng-app="myApp">
<a class="btn" data-toggle="modal" data-target="#modal">Add new item</a>

<div ng-controller="ListController">
    <h4>List</h4>
    <ul>
        <li ng-repeat="item in list">
            {{item.name}}
            <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editItem(item)">Edit item</a>
        </li>
    </ul>
</div>

<div id="modal" role="dialog" class="modal hide fade">
    <div ng-controller="ItemController">
        <div class="modal-header">
            Item Dialog
        </div>
        <div class="modal-body">
            <label for="txtName" />
            <input type="text" id="txtName" ng-model="item.name" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="saveItem()" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>

and controllers code:

var db_list = [{ name: "Test1" }, { name: "Test2" }];
var app = angular.module('myApp', []).
controller('ListController', function($scope, $rootScope) {
    $scope.list = db_list;
    $scope.editItem = function(item) {
        $rootScope.item = item;
    }
}).
controller('ItemController', function($scope, $rootScope) {
    $scope.saveItem = function() {
        db_list.push($rootScope.item);
        $rootScope.item = null;
    }
});

Also you can find the working ptototype at http://jsfiddle.net/yoyoseek/9Qntw/16/.

The general problem in this code that I store entity to display its description using scope of the ListController (via editItem()), but I need this stored entity details in the ItemController. I use $rootScope for sharing entity to edit and it looks like hack for me. Is it a normal practice?

This code has one more drawback: $rootScope.item have to been cleared on modal dialog hide.

ng-grid is a good control. However I want to solve this task wothout angulatr-ui. — Dmitriy
– Dmitriy, Commented Jul 22, 2013 at 12:52

alexandroid · Accepted Answer · 2014-04-17 06:22:43Z

It looks like the main problem here is that events triggered by data-toggle happen outside of your control and it's not part of the AngularJS bindings (I am new to it so I may be wrong).

Anyway, it seems like there is no way to cross-reference controllers in Angular, and the only way to get hold of them is via inspecting the DOM. But, once you get into that, you may as well initialize the scope directly (http://jsfiddle.net/B4kAW/4/):

var db_list = [{ name: "Test1" }, { name: "Test2" }];

var app = angular.module('myApp', []);

app.controller('ListController', function($scope) {
    $scope.list = db_list;

    $scope.editItem = function(item) {
        angular.element(document.getElementById("modal")).scope().item = item;
    };
});

app.controller('ItemController', function($scope) {
    $scope.saveItem = function(item) {
        //db_list.push(item);
        //$rootScope.item = null;
    };
});

Note:

The modal dialog here has no way of knowing whether it's opened for editing, or adding a new item (I commented out push).
Since the dialog is linked with "main" item in the list, it updates it instantly (can be seen while the dialog is open, on the background). You may need to copy it instead of using a reference.

Inspired by this answer. It looks like "the Angular way" around dialogs is to convert them into services.

Collectives™ on Stack Overflow

Display list of items and edit them via AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related