Angularjs 获取的数据和本地修改的数据之间的差异

Question

我从API获取数据，它给了我这样的信息：

{id: 1, name: ''}

输入字段的字段名称ng-model。 一旦我在字段中写入了一些东西，我引用的 json 对象将具有 name 等于空以外的其他内容。 这是正常行为。

但是，如果我有兴趣知道在获取数据时名称"是否"为空，我可以用简单的方式做到这一点吗？无需创建新变量？

基本上我想有 2 个ng-if元素，只显示其中一个。但是我不能信任对象中的数据，因为我不知道名称字段是否已在本地或服务器上更改：

<input type="text" ng-model="ctrl.name" ng-if="ctrl.name === ''" />
<span ng-if="ctrl.name !== ''">{{ctrl.name}}</span>

Answer 1

可以使用输入的$dirty(此文档是关于form的，但对于inputs也是如此(的formprop，因此逻辑将是：如果未定义name(undefined或空字符串(或输入脏时显示输入 - 表示用户在输入中键入。而span则相反.这样你就不必持有另一个参数。

angular.module('app', []).controller('myController', function() {
// comment this line to simulate name was empty
// this.name = 'text from server';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="myController as ctrl">
<form name="myForm">
<input type="text" name="name" ng-model="ctrl.name"
ng-if="!ctrl.name || myForm.name.$dirty" />
<span ng-if="!!ctrl.name && !myForm.name.$dirty">{{ctrl.name}}</span>
</form>
</div>
</div>