angularjs下拉菜单：使用一个选项中的不同信息填充两个输入字段

Question

我是AngularJS的新手。我想从下拉列表 RegistrationType 中选择一个选项，并希望该选项确定填充自己的输入 AND 输入 RegAmount 的内容。 因此，我选择第一个选项，$ 155.00两天，“$ 155.00”将显示在 RegAmount 输入中，“Two Day”应显示在 RegistrationType 输入中。 到目前为止，在过去的两天里我多次失败了。任何建议表示赞赏。我尝试过的一件事是在选项中添加名称/ ID并尝试将其与 RegAmount 绑定，但我无法分离信息。 如果第一个选项被选中，我还尝试了一个ng-if复制 RegAmount div以显示“$ 155.00”，如果没有选择，则尝试ng-if显示“$ 95.00”。也无法让它工作。哦，不， RegAmount 当然不应该是输入，但我还没改变它。

function ContactController($scope) {

  $scope.changeme = function() {

  }

  var uid = 1;

  $scope.contacts = [{
    id: 0,
    'regType': '5555',
    'RegistrationType': '5555'
  }];

  $scope.saveContact = function() {

    if ($scope.newcontact.id == null) {
      $scope.newcontact.id = uid++;
      $scope.contacts.push($scope.newcontact);
    } else {

      for (var i in $scope.contacts) {
        if ($scope.contacts[i].id == $scope.newcontact.id) {
          $scope.contacts[i] = $scope.newcontact;
        }
      }
    }
    $scope.newcontact = {};
  }

  $scope.delete = function(id) {

    for (var i in $scope.contacts) {
      if ($scope.contacts[i].id == id) {
        $scope.contacts.splice(i, 1);
        $scope.newcontact = {};
      }
    }
  }

  $scope.edit = function(id) {
    for (i in $scope.contacts) {
      if ($scope.contacts[i].id == id) {
        $scope.newcontact = angular.copy($scope.contacts[i]);
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="" ng-controller="ContactController">
  <form class="well">
    <div>
      <label>Registration Type</label>
      <select name="RegistrationType" ng-model="newcontact.RegistrationType">
        <option value = "">-- Select an Option --</option>
        <option value = "Two Day">$155.00 Two Day</option>
        <option value = "First Day">$95.00 First Day</option>
        <option value = "Second Day">$95.00 Second Day</option>
      </select>
    </div>

    <div>
      <label>Registration Amount</label>

      <input type="text" name="Registration Amount" ng-model="newcontact.RegAmount" />

    </div>

    <br>
    <div>

      <input type="hidden" ng-model="newcontact.id" />
      <input id="buttonSave" type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
      <p style="clear: both;"></p>

    </div>
  </form>

  <br/>
  <br/>

  <table>
    <thead>
      <tr>
        <th>Registration Type</th>
        <th>Registration Amount</th>
        <th>Edit | Delete</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="contact in contacts">
        <td>{{ contact.RegistrationType }}</td>
        <td>{{ contact.RegAmount }}</td>


        <td>
          <a href="#" ng-click="edit(contact.id)">edit</a> |
          <a href="#" ng-click="delete(contact.id)">delete</a>
        </td>
      </tr>
    </tbody>
  </table>

Answer 1

您可以使用NgOptions来解决此问题，这是一个示例

＆＃13;

＆＃13;

angular.module("app",[]).controller('testCtrl' , function($scope) {

var uid = 1;
$scope.newcontact = {};
 $scope.days = [
  { id:1, text:"$155.00 Two Day (Now to 8 p.m. Sept 10)", price:"$155.00", day:"Two Day" },
  { id:2, text:"$95.00 First Day (Now to 8 p.m. Sept 10)", price:"$95.00", day:"First Day" },
  { id:3, text:"$95.00 Second Day (Now to 8 p.m. Sept 10)", price:"$95.00", day:"Second Day" }
];


  $scope.contacts = [];

  $scope.saveContact = function() {

    if ($scope.newcontact.id == null) {
      $scope.newcontact.id = uid++;
      $scope.contacts.push($scope.newcontact);
    } else {

      for (var i in $scope.contacts) {
        if ($scope.contacts[i].id == $scope.newcontact.id) {
          $scope.contacts[i] = $scope.newcontact;
        }
      }
    }
    $scope.newcontact = {};
  }

  $scope.delete = function(id) {

    for (var i in $scope.contacts) {
      if ($scope.contacts[i].id == id) {
        $scope.contacts.splice(i, 1);
        $scope.newcontact = {};
      }
    }
  }

  $scope.edit = function(id) {
    for (i in $scope.contacts) {
      if ($scope.contacts[i].id == id) {
        $scope.newcontact = angular.copy($scope.contacts[i]);
      }
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
  <form class="well">
    <div>
      <label>Registration Type</label>
      <select ng-model="newcontact.RegistrationType"  ng-options="item as item.text for item in days">
        <option value = "">-- Select an Option --</option>
      </select>
      </div>
      


    <div>
      <label>Registration Amount</label>
      

      
<input type="text" name="Registration Amount" ng-model="newcontact.RegistrationType.price" />

      </div>
   
    <br>
    <div>

      <input id="buttonSave" type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
      <p style="clear: both;"></p>

    </div>
  </form>

  <br/>
  <br/>

  <table>
    <thead>
      <tr>
        <th>Registration Type</th>
        <th>Registration Amount</th>
        <th>Edit | Delete</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="contact in contacts">
        <td>{{ contact.RegistrationType.text }}</td>
        <td>{{ contact.RegistrationType.price }}</td>


        <td>
          <a href="#" ng-click="edit(contact.id)">edit</a> |
          <a href="#" ng-click="delete(contact.id)">delete</a>
        </td>
      </tr>
    </tbody>
  </table>

＆＃13;

＆＃13;

＆＃13;