Question

我使用对象ITEMS来保存数据

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

当我点击＆＃39;添加选项＆＃39;按钮我需要显示＆＃39;值＆＃39;和＆＃39;文字＆＃39;在HTML页面中：

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

我可以显示对象长度，但我无法显示添加的选项。 $ watch（$ watchCollection）也不起作用。

在这个例子中，我没有从输入中获取值。

enter link description here

Answer 1

您的项目数组目前的状态存在问题。我认为你的$ scope.items应该是这样的：

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

而不是一个对象中的所有对象，就像你推动你创建一个新对象一样。

根据您的问题，调用items.value将导致未定义。

您需要在$ scope.items中调用一个对象。调用项[$ scope.items.length-1]将获得最新添加的对象，以及[items.items.length-1] .value和items [$ scope.items.length-1] .text这样的项目该对象中的值

Answer 2

您的$scope.items数组未正确声明。你需要在数组中的每个单独项目周围使用大括号，如下所示：

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

你的指令是各种各样的搞砸了。如果您只想在列表中显示项目，则甚至不需要创建新指令。你可以这样做：

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

您的文本框没问题，但ng-model="addoText"中的拼写错误除外。您下面的标签应绑定到与文本框相同的变量。

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

这将在您键入文本框时更新标签。如果您不想在添加新项目之前更新标签，请将它们绑定到一些新变量，如下所示：

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

最后，您的add()函数应如下所示：

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

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

这会将新项目推送到数组，并将标签上的绑定设置为新值。你不需要$watch任何东西。

这里是Plunker。

AngularJS Push in Collection，Show from Collection，$ watch changes

2 个答案: