AngularJS推送集合，从集合中显示，$ watch更改

Question

I use object ITEMS to hold data

$scope.items = [
    {value:'title1', text: 'head1',
    value:'title2', text: 'head2',
    value:'title3', text: 'head3' }
];

When I clicked 'Add option' button I need show 'value' and 'text' in HTML page:

$scope.items.push(
    {
        value: 'value1',
        text: 'text1'
    }
);

I can show object length, but I can't show added option. And $watch ($watchCollection) doesn't work too.

In this example I don't get values from inputs.

enter link description here

Answer 1

There is an issue with how your items array looks at the moment. I think your $scope.items should look like:

$scope.items = [
    {
        value: "value1",
        text: "text1"
    },
    {
        value: "value2",
        text: "text2"
    }
]

rather than all in one object, as when you push you'll create a new object.

With your question, calling items.value, will result in an undefined.

You need to call an object in $scope.items. Calling items[$scope.items.length-1] will get the most recent object added, and such items[$scope.items.length-1].value and items[$scope.items.length-1].text the values in that object

Answer 2

Your $scope.items array is improperly declared. You need braces around each separate item in the array, like this:

$scope.items = [
    {value:'title1', text: 'head1'},
    {value:'title2', text: 'head2'},
    {value:'title3', text: 'head3'}
];

Your directive is all kinds of messed up. You don't even need to create a new directive if all you want to do is display the items in a list. You can just do this:

<select ng-model="selectedItem" ng-options="item.text for item in items"></select>

Your textboxes are ok, except for the typo in the ng-model="addoText" . Your labels below should be bound to the same variables as the textboxes.

key: {{addVal}} <br>and value: {{addText}}

That will update the labels as you type in the textboxes. If you don't want to update the labels until you add a new item, then bind them to some new variables, like this:

key: {{newVal}} <br>and value: {{newText}}

Finally, your add() function should look like this:

$scope.add = function () {          
    $scope.items.push(
        {
            value: $scope.addVal,
            text: $scope.addText
        }
     );

    $scope.newVal = $scope.addVal;
    $scope.newText = $scope.addText;
};

This pushes the new item to the array, and sets the bindings on your labels to the new values. You don't need to $watch anything.

Here's a Plunker .