如何在angularjs中使用帶有條件的ng-model？

我是angularjs的新手。我在我的管理面板中使用角度在我的apis上執行CRUD。如何在angularjs中使用帶有條件的ng-model？

我有下面的屏幕截圖，其是儀表板payment.html

enter image description here

HTML代碼段用於上述SS是：

<div class="MT10 clearfix"> 
      <h2 class="FL MT15">Manage Payment Gateway List</h2> 
      <button class="FR"><a href="" ng-click="go('/manage-payment/',routeParamsAppId)">Create New Payment Gateway</a></button> 
     </div> 
     <div class="MT10" ng-init="initPaymentController()"> 
      <table width="100%" class="tbl_data"> 
      <tbody> 
       <tr> 
       <th>&nbsp;</th> 
       <th>Gateway Name</th> 
       <th>App ID</th> 
       <th>App Key</th> 
       <th>App Secret</th> 
        <th>Is Active</th> 
       <th colspan="2">Action</th> 
       </tr> 
       <tr ng-repeat="detail in paymentDetails"> 
       <td><input type="radio" name="radio" id="radio" value="radio"></td> 
       <td>{{detail.name}}</td> 
       <td>{{detail.appId}}</td> 
       <td>{{detail.appKey}}</td> 
       <td>{{detail.appSecret}}</td> 
       <td><input type="checkbox" name="checkbox" id="checkbox"></td><!--go('/manage-CMS/',detail)--> 
       <td width="20"><a href="" class="icon edit" ng-click="go('/manage-payment/',detail)"></a></td> 
       <td width="20"><a href="javascript:;" ng-click="removeGateway(detail,$index)" class="icon delete"></a></td> 
       </tr> 
      </tbody> 
      </table> 
     </div>

接着的onclick 「PENCIL」（的編輯功能）圖標我在我的控制器中調用一個函數，其代碼爲：

$scope.go = function (path, obj) { 

     if(obj.appId == undefined){ 
      $location.path(path +obj); 
     } 
     else{ 
      $location.path(path + ""+obj.id + "/"+obj.appId); 
     } 

    };

在這裏，我傳遞我的整個數據對象，以便在文本框中顯示已輸入的詳細信息。

所以點擊之後PENCIL我可以在瀏覽器中查看以下內容： enter image description here

如果您發現鏈接：

http://127.0.0.1:59232/index.html#/manage-payment/9b276b15-7460-4bf0-a62d-66d92f222fe4/5538e1c3e4b0f4eb7d13fd08

參數：5538e1c3e4b0f4eb7d13fd08是越來越設置爲APP文本框根據需要，這是禁用的意思不能被編輯。

Uptil這一切都很好。現在我已經介紹了EDIT場景。

現在儀表板payment.html你可以看到創建新的支付網關按鈕是存在的。

現在那個按鈕，我下方顯示SS的點擊：

enter image description here

現在URL看起來像： http://127.0.0.1:59232/index.html#/manage-payment/5538e1c3e4b0f4eb7d13fd08

，我想顯示該5538e1c3e4b0f4eb7d13fd08參數我APP textbox。但我正在努力展示這一點。我爲HTML片段是：管理-payment.html

<div id="tabs-2"> 
    <div class="MT10" ng-init="getPaymentDetailsById()"><!--getPaymentDetailsById()--> 
     <div class="panel"> 
      <div class="form-group"> 
      <label> Name:</label> 
       <span class="rightside"> 
         <input type="text" value="" ng-model="singleGatewayDetails.name" > 
       </span> 
      </div> 
      <div class="form-group"> 
      <label> APP :</label> 
      <span class="rightside">  
       <input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId"> 
      </span> 
      </div> 
      <div class="form-group"> 
      <label> APP KEY:</label> 
       <span class="rightside">  
        <input type="text" value="" ng-model="singleGatewayDetails.appKey" > 
       </span> 
      </div> 
      <div class="form-group"> 
      <label> APP SECRET:</label> 
       <span class="rightside">  
        <input type="text" value="" ng-model="singleGatewayDetails.appSecret"> 
       </span> 
      </div> 

     </div> 
     </div> 
    </div>

我可以說的是是顯示該參數當編輯，但不顯示，而發佈的新數據。

請幫忙。

來源

2015-04-27 mahendrakawde

問題有點長，難以閱讀。任何方式，你可以簡化它？ – AlexMA

@AlexMA我想要的是如何使用2個不同的場景相同的文本框？ – mahendrakawde

沒有辦法通過觀看模板只 – skazska