如何從第一個表單傳遞id和名稱，並在angularjs中僅顯示第二個表單的名稱

我有兩種形式。在這些形式中，我們從第一種形式獲取輸入，並在第二種形式中顯示，這意味着如果用戶從下拉菜單中選擇貨幣，我需要傳遞id和貨幣名稱。但只顯示第二種形式的貨幣名稱。我嘗試了一種方法（不知道它是否正確），它只顯示id。對角度來說是新的。無論如何要解決這個問題嗎？如何從第一個表單傳遞id和名稱，並在angularjs中僅顯示第二個表單的名稱

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; 

     }

來源

2017-06-20 ManojKanth

你能告訴一個plunker？ –

你可以使用服務來保持數據，同時從一個視圖轉換到另一個... –

@PankajParkar實際上是新角度。我不知道該怎麼做..你可以提供一個工作代碼 – ManojKanth

這是你可以去最簡單的解決方案。而不是讓value={{CurrencyId.currencyId}}將其設置爲value={{CurrencyId.name}}作爲下拉列表中的選項，而且您很好。下面是相同的演示。但是，如果要將currencyId保存爲值，則必須迭代陣列並根據所選的currencyId找到名稱，然後在視圖中顯示該名稱。

UPDATE

更新了代碼具有currencyId被存儲爲所選擇的值，然後基於該表示在視圖中的名稱。

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() { 
 
\t 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; 
 
    } 
 
});

<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>

希望它能幫助:)

來源

2017-06-20 05:04:05 Manish

不客氣。高興地幫助:) – Manish

請幫我..如何做到這一點?? 「」「如果你想保存currencyId作爲值，那麼你將不得不遍歷數組，並根據選定的currencyId找到名稱，然後在視圖中顯示該名稱。」「對於角度來說是新的。」 – ManojKanth

是的，你會必須迭代數組才能找到選定的貨幣。等待將更新答案 – Manish

嘗試

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

來源

2017-06-20 04:05:46 Imad

沒有它不起作用。imad – ManojKanth

請立即檢查 – Imad

我已經試過這一個..它不適合我... imad – ManojKanth

可以使用NG選項，它很flexiable在這裏我們可以顯示一個值，並選擇整個對象或任何特定的屬性。

請檢查下面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-選項的詳細信息，經過下面的視頻 https://www.youtube.com/watch?v=vqx3zCy4d3I

來源

2017-06-20 05:42:11

如何從第一個表單傳遞id和名稱，並在angularjs中僅顯示第二個表單的名稱

回答

相關問題