Не могу добавить src img в $ scope.data

Question

Я хочу иметь возможность выбрать человека, и при его выборе я вижу его значения (имя, телефон, электронная почта, ..): html:

<td class="leftAlign">
<span  class="nullable">
<select ng-model="data.selectedPerson" ng-options="x.name for x in persons">
<option value="">-- Person --</option></select>
                    <br><br>
                    {{data.selectedPerson.name}}<br>
                    {{data.selectedPerson.Addrstr1}}<br>
                    {{data.selectedPerson.Tel}}<br>
                    {{data.selectedPerson.Mail}}<br>
                    <img data-ng-src="{{data.selectedPerson.img}}">
                    </span>
                </td> 

Этоотлично работает, я вижу все ценности человека, и img тоже.Чтобы сбросить все в моей HTML-форме, у меня есть кнопка сброса, с JS :

  $scope.reset = function() {
    $scope.data = {};
  };

, однако я не могу стереть img.в JS значения персон находятся в массиве:

$scope.person = [
            {name : "MrPerson1", 
            Addrstr1:"59 road",
            Tel: "0234225163",
            Email : "direction@gmail.com ",
            img : "images/person1.PNG",
}];

Не могли бы вы помочь мне, пожалуйста?

Answer 1

Проверьте этот пример, вы удаляете данные, но не модель ng <select>

var Controller = function() {
  var vm = this

  vm.persons = [{
    name: "MrPerson1",
    Addrstr1: "59 road",
    Tel: "0234225163",
    Email: "direction@gmail.com ",
    img: "https://lh3.googleusercontent.com/-crlUFIoyB3k/UdzsGwV__AI/AAAAAAAAAXs/ErA8XESRgwk/5LsFP.gif",
  }, {
    name: "MrPerson2",
    Addrstr1: "59 road",
    Tel: "0234225163",
    Email: "direction@gmail.com ",
    img: "https://lh3.googleusercontent.com/-Ta_b7Z96-mE/Ud2hTqB-84I/AAAAAAAABEQ/BPY_MIbLitc/SausageDogAnimation.gif",
  }, {
    name: "MrPerson3",
    Addrstr1: "59 road",
    Tel: "0234225163",
    Email: "direction@gmail.com ",
    img: "https://www.gravatar.com/avatar/e27096ea0e246d04139047d40ff566d2?s=32&d=identicon&r=PG",
  }];

  vm.data = vm.persons

  vm.reset = function() {
    vm.data.selectedPerson = {}
  };
};

angular
  .module('app', [])
  .controller('Controller', Controller);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller as vm">
  <button ng-click="vm.reset()">Reset</button>
  <select ng-model="vm.data.selectedPerson" ng-options="x.name for x in vm.data">
    <option value="">-- Person --</option>
  </select>
  <br><br> {{vm.data.selectedPerson.name}}
  <br> {{vm.data.selectedPerson.Addrstr1}}
  <br> {{vm.data.selectedPerson.Tel}}
  <br> {{vm.data.selectedPerson.Mail}}
  <br>
  <img ng-if="vm.data.selectedPerson.img" ng-src="{{vm.data.selectedPerson.img}}" />

</div>