文本框中的角度禁用值中的 ng-model

Question

我正在尝试使用 angularjs 在 mvc-asp 中开发一个页面。我有一个这样的文本框：

<div class="input-group">
    <label for="Name">نام خودرو</label>
    <input class="form-control" id="Name" ng-model="Name" required name="Name" type="text" value="@Edit.Name">
</div>
<span style="color:red" ng-show="frm.Name.$invalid">
    <span ng-show="frm.Name.$error.required">نام خودرو را وارد کنید</span>
</span>

如您所见，我使用 angularjs 验证了文本框。一切正常，但问题是value="@Edit.Name" 我将此选项用于编辑编辑控制器中我将我的值推送到名为Edit 的视图包，然后使用value="@Edit.Name" 将值传递给文本框。

正如您在代码中看到的，当我单击编辑按钮时，值应该传递给文本框，但文本框为空，当我删除 ng-model="Name" 时，它工作正常并且文本框充满价值..

为什么？

Answer 1

这是因为当您指定 ng-model 指令时，angular 会将输入的值更新为控制器中 Name 的值，我只能假设这是一个空值。

在生成页面时直接在输入上设置值不会更新基础模型值。真正发生的是，您正在使用输入中的值生成页面，并且 angular 会根据ng-model (Name) 的值 (null) 立即更新输入的值。

您需要以有角度的方式做事，并将控制器范围内的Name 的值设置为您想要填充的值。

不幸的是，它太复杂了，无法在此处为您提供有关如何使用 AngularJS 构建 .NET MVC 应用程序的信息。但是，我建议您在 https://angularjs.org/ 网站和 YouTube（这似乎很有帮助 https://www.youtube.com/watch?v=zKkUN-mJtPQ&list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl）上阅读一些初学者 Angular 教程，以了解除了 .NET 之外，Angular 是如何独立工作的。

一旦您了解了 Angular 本身的工作原理，您就可以将其整合到 .NET MVC 应用程序中。我建议您在学习 Angular 时不要使用 .NET MVC，因为这两个应用程序的结构根本不同，作为初学者，您会遇到很多问题。

当您一起使用它们时，这里有一个提示：使用 angular resources（处理 ajax）和 services/factories/providers 来调用您的控制器方法并检索要绑定到的 angular 数据。 MVC 视图本身根本不会处理数据绑定。