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

检查此示例，您将删除数据，但不删除<select>的ng-model

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>

无法将src img添加到$ scope.data

1 个答案: