11

I'm new to AngularJS and can't find any suitable answer for this. My app currently consists of a list of items displayed via Angular. There is also a label which displays the name of the currently selected item, and an input box which allows the name of the currently selected item to be modified.

What I cannot figure out is how to simultaneously:

  1. Allow the selection of an item, which triggers the update of the label and the input box text to display the name of the newly selected item
  2. Allow editing of the name in the input box which triggers the update of the label displaying the currently displayed item name
  3. Edits to the name should be reflected in the original model item

At the moment, i'm trying to keep track of which item is current via a flag against the item and this isn't doing what I want. Ideally I would replace currentItem in the below with a direct reference to the item in items with isCurrent=true.

Current item name label:

`<div id="CurrentItem" data-ng-model="currentItem">{{currentItem.name}}</div>`

Current item name input box:

`<input id="ItemName" type="text" data-ng-model="currentItem" value="{{currentItem.name}}" />`

Display all items:

<div data-ng-repeat="item in items" data-ng-click="changeItem(item)">`
    <img src="images/ItemIcon.png">
<div>{{item.name}}</div>

Controller:

var CoreAppController = function($scope, $location) {
   $scope.changeItem = function(item) {
        var length = $scope.items.length;
        while(length-- ) {
            $scope.items[length].isCurrent = false;
        }
        $scope.currentItem = item;
        $scope.items.indexOf(item).isCurrent = false;
    }

    $scope.createItem = function(name, layout) {
        $scope.items.push({ id: $scope.items.length + 1,
                            name: name,
                            isCurrent: false
        });
    }

    // Initialisation
    $scope.items = [];
    $scope.createItem("Item 1");
    $scope.createItem("Item 2");

    $scope.items[0].isCurrent = true;
    $scope.currentItem = $scope.items[0];

}

Any advice appreciated!

4

1 に答える 1

19

I'm not sure about your current code, but here is a mock up that does what it appears you're requesting.

The JS

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'test' }
    ];
    $scope.editing = null;
    $scope.editItem = function(item) {
      $scope.editing = item;
    }
});

and the markup

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items">
        {{item.name}}
        <a ng-click="editItem(item);">edit</a>
      </li>
    </ul>
    <div ng-show="editing">
       <input type="text" ng-model="editing.name"/>
       <span>{{editing.name}}</span>
    </div>
  </body>

Hopefully that helps. If you need more of a description, let me know.

于 2013-01-24T14:45:38.780 に答える