AngularJS，Object显示在不需要的地方

Question

First a link to my code.

我有以下代码：

<div>
<form ng-show="hiddenAdd">
    ID: <input type="text" ng-model="website.id" /> <br />
    Name: <input type="text" ng-model="website.name" /> <br />
    Secret Key:<input type="text" ng-model="website.secretKey" /> <br />
    Public Key:<input type="text" ng-model="website.publicKey" /> <br />
    User Idetification: <input type="text" ng-model="website.userIdentification" /> <br />
    <button>save</button>
    <button>cancel</button>
</form>
</div>
<!--Holdes the website form details-->

<!--Holdes the website form -->
<div ng-show='hiddenDetail'>
    <p>Details</p>
    id: {{website.id}}<br />
    name: {{website.name}}<br />
</div>

此页面有form，可以添加包含信息的新网站和详细信息部分 从列表中显示有关网站的详细信息，如：

当我按下详细信息按钮时，问题就开始了。我在里面找到了网站详​​情 形式，像那样：

我理解为什么会发生这种情况，但我如何隔离对象呢？ 我知道它有scope隔离的东西，但我不确定如何实现它。

Answer 1

您可以将ng-hide=""用于您不想展示的所有元素。

Answer 2

您绑定了相同的website变量以显示和添加新元素。您需要将表单绑定到另一个对象，其余的将工作。此外，每次单击Add Website按钮时都需要创建新模型。

查看此更新的plunker