Question

我有两种形式。在这些形式中我从第一种形式获得输入并显示在第二种形式中，这意味着如果用户从下拉列表中选择货币，我需要传递id和货币名称。但是只显示第二种形式的货币名称。我尝试了一种方法（不知道它是否正确）它只显示id。我是角色的新手。无论如何要解决这个问题？

HTML

         <div class="row text-center" ng-show="firstform">
                <form name="validation">
            <label>Currency</label>
             <select ng-model="CurrencyId" ng-selected="CurrencyId" class="form-control" id="CurrencyId">
              <option ng:repeat="CurrencyId in currencyList" ng-selected="selectedCurrencyType == CurrencyId.id" value={{CurrencyId.currencyId}}>{{CurrencyId.name}}</option>
            </select>

             <label>Grade</label>
             <select ng-model="GradeId" ng-selected="GradeId" class="form-control" id="GradeId">
            <option ng:repeat="GradeId in RaceGradeList" ng-selected="selectedGrade == GradeId.id" value={{GradeId.id}}>{{GradeId.gradeName}}</option>
            </select>
    <button type="submit"value="add" ng-click="savedetails()" />
       </form>
    </div>


      <div class="row text-center" ng-show="secondform">
     <form name="thirdform">
     <ul >
      <li><p>Currency:{{CurrencyId}}</p> </li>
     <li><p>Grade:{{GradeId}}</p> </li>
     </ul>
     </form>
</div>

角度控制器

    $scope.savedetails = function () {
            $scope.firstform= false;
            $scope.secondform = true;

        }

Answer 1

这是您可以选择的最简单的解决方案。而不是让value={{CurrencyId.currencyId}}将其设置为value={{CurrencyId.name}}以用于下拉列表中的选项，您可以继续使用。以下是相同的演示。但是，如果要将currencyId保存为值，则必须迭代数组并根据所选的currencyId查找名称，然后在视图中显示该名称。

<强>更新

更新了代码，以便将currencyId存储为所选值，然后根据在视图中显示名称的代码。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.currencyList = [{
      currencyId: 1,
      name: "INR"
    },
    {
      currencyId: 2,
      name: "$"
    },
    {
      currencyId: 3,
      name: "#"
    }
  ];
  $scope.currencyChanged = function() {
	var selectedCurrency;
    for (var i = 0; i < $scope.currencyList.length; i++) {
      var thisCurr = $scope.currencyList[i];
      if ($scope.CurrencyId == thisCurr.currencyId)
        selectedCurrency = thisCurr.name;
    }
    return selectedCurrency;
  }
  $scope.firstform = true;
  $scope.savedetails = function() {
    $scope.firstform = false;
    $scope.secondform = true;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="row text-center" ng-show="firstform">
    <form name="validation">
      <label>Currency</label>
      <select ng-model="CurrencyId" ng-selected="CurrencyId" class="form-control" id="CurrencyId">
              <option ng:repeat="CurrencyId in currencyList" ng-selected="CurrencyId == CurrencyId.currencyId" value={{CurrencyId.currencyId}}>{{CurrencyId.name}}</option>
            </select>
      <button type="button" value="add" ng-click="savedetails()">Save Details</button>
    </form>
  </div>


  <div class="row text-center" ng-show="secondform">
    <form name="thirdform">
      <ul>
        <li>
          <p>Currency:{{currencyChanged()}}</p>
        </li>
      </ul>
    </form>
  </div>
</body>

＆＃13;

希望有所帮助：）

Answer 2

您可以使用ng-options，它非常灵活，我们可以显示一个值并选择整个对象或任何特定属性。

请检查下面的plunker，希望它符合您的要求

https://plnkr.co/edit/JQjmAwk62R8rfAlTZ696?p=preview

  <select ng-model="CurrencyId" ng-options="currency.id for currency in currencyList" class="form-control" id="CurrencyId" >

        </select>

有关ng-options的更多详细信息，请参阅以下视频 https://www.youtube.com/watch?v=vqx3zCy4d3I

Answer 3

尝试

<li><p>Currency:{{CurrencyId.name}</p> </li>

如何从第一个表单传递id和name，并在angularjs中仅显示第二个表单中的名称

3 个答案: