Angularjs разница между извлеченными и локально измененными данными

Question

Я получаю данные из API, и это дает мне что-то вроде этого:

{id: 1, name: ''}

Имя поля ng-model для поля ввода.Как только я напишу что-то в поле, у объекта json, на который у меня есть ссылка, будет имя, равное чему-то другому, кроме пустого.Это нормальное поведение.

Однако, если мне интересно узнать, было ли имя «пустым» при получении данных, могу ли я сделать это простым способом?Без необходимости создавать новые переменные?

В основном я хочу иметь 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, но это верно и для input с) реквизита входа в form, поэтому логика будет такой: показатьввод, если 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>