通過angularjs更改模態窗口標題

Question

我正在通過創建一個簡單的庫存應用練習angularjs。我有一個按鈕來將新產品添加到產品列表中，並且我有一個現有產品的編輯按鈕。

這兩個按鈕都會彈出相同的模式窗口，並且我已將其設置爲在單擊「添加新產品」按鈕時單擊以顯示「新產品」的按鈕時單擊以「編輯產品」編輯現有產品。

我遇到的問題是當我點擊添加一個新產品的標題顯示正確;但是，只要我開始爲新產品輸入新代碼，標題會自動更改爲「編輯產品」。

下面是我使用此代碼，整個代碼可以在這裏找到http://codepen.io/andresq820/pen/LWGKXW

模態窗口中codepen.io不來了;不過，我在編輯按鈕被點擊時寫入日誌「編輯」到控制檯，點擊新產品時寫入「新」。

HTML CODE

<div class="modal fade" id="editItemModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">{{title(item.code)}}</h4> 
      </div> 

      <div class="modal-body"> 
       <form name="myEditForm" ng-submit="editProduct(item)"> 
        <div class="form-group"> 
         <label for="code">Code:</label> 
         <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code" 
           ng-model="item.code" ng-disabled="false"> 
        </div> 

        <div class="form-group"> 
         <label for="description">Description:</label> 
         <input type="text" class="form-control" id="description" ng-model="item.description" required> 
         <span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span> 
        </div> 

        <div class="form-group"> 
         <label for="amount">Amount:</label> 
         <input type="number" min="0" max="99999" size="5" maxlength="5" class="form-control" name="amount" id="amount" 
           ng-model="item.amount" integer> 
        </div> 



        <div class="form-group"> 
         <label for="radio">Type:</label> 
         <div class="radio"> 
          <label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label> 
          <label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label> 
         </div> 
        </div> 

        <div class="modal-footer"> 
         <input type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()" value="Close" /> 
         <input type="submit" class="btn btn-primary pull-right" value="Submit" /> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

ANGULARJS CODE

$scope.title = function(code){ 
    console.log(code); 

    if (typeof code == 'undefined'){ 
     console.log('new'); 
     return 'New Product'; 
    } 
     console.log('edit'); 
     return 'Edit Product';     
}; 

Answer 1

用以下代碼更改您的function。它會檢查代碼是否已經存在於您的$scope.items中。如果物品未退出，它將作爲新的返回。

$scope.title = function(code){ 
    var title = 'New Product'; 
    angular.forEach($scope.items, function(value, key) { 
     var arr = Object.values(value); 
     if(arr.indexOf(code) !== -1) { 
     title = 'Edit Product'; 
     } 
    }); 
    console.log(title); 
    return title; 
}; 

Answer 2

爲代碼輸入框綁定到item.code值。只要你開始在那裏輸入任何東西，item.code不再是undefined。根據您在函數方法調用中的條件，當代碼不是undefined時，它會返回編輯標題。

Answer 3

在你看來，你讓你通過title()功能和什麼函數返回基於當前的代碼稱號。只要您更改模型中的任何內容，Angular就會檢測到一個更改，並會檢查所有雙向綁定，看看是否需要更改。

所以你的情況會發生以下情況：

1. 你輸入一個代碼
2. 角檢測到變化
3. 角將檢查所有的綁定，看看他們是否改變（ngBinding或更常見的{{}} ）
4. title()函數被調用以查看它是否發生了變化，標題函數確實發生了變化，現在有一個代碼，所以它會返回新的標題。

那麼你如何解決它？簡單！

而不是雙向綁定（{{}}）您可以使用一次性綁定（{{::}}）。一次綁定被設置一次，然後Angular'忘記'它，它根本不會在意發生的任何變化。

你的情況：

{{title(item.code)}} 

到

{{::title(item.code)}}