通过angularjs更改模式窗口标题

Question

我正在通过创建一个简单的清单应用程序来练习angularjs。 我有一个将新产品添加到产品列表的按钮，还有一个针对现有产品的编辑按钮。

两个按钮都调出相同的模态窗口，并对其进行了设置，以便当我单击“添加新产品”按钮时模态的标题显示为“新产品”，而单击以编辑现有产品时模态的标题为“编辑产品” 。

我遇到的问题是，单击添加标题正确显示的新产品时； 但是，一旦我开始为新产品输入新代码，标题就会自动更改为“编辑产品”。

以下是我为此使用的代码，可以在这里找到完整的代码http://codepen.io/andresq820/pen/LWGKXW

模态窗口不会出现在codepen.io中。 但是，单击“编辑”按钮时，我正在将日志“编辑”记录到控制台，单击新产品时，则是将“新”日志记录到控制台。

HTML代码

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

Angullars代码

 $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

代码的输入框绑定到item.code值。 一旦您在其中输入任何内容， item.code将不再是undefined 。 根据您在函数调用方法中的条件，当代码undefined时，它将返回Edit title。

Answer 2

使用以下代码更改您的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 3

在您看来，您可以通过title()函数获得标题，并且该函数返回的内容基于当前代码。 一旦您更改了模型中的任何内容，Angular就会检测到更改，并将遍历所有双向绑定，并查看是否需要更改它们。

因此，在您的情况下，会发生以下情况：

1. 您输入验证码
2. 角度检测到变化
3. Angular将检查您所有的绑定以查看它们是否已更改（ngBinding或更常见的{{}} ）
4. 调用title()函数以查看其是否已更改，title函数的确已更改，现在有一个代码，因此它将返回新标题。

那么如何解决呢？ 简单！

可以使用一次性绑定（ {{::}}来代替双向绑定（ {{}} {{::}} ）。 一次性设置一次绑定，然后Angular对其进行“忘记”，它根本不再关心发生在它上面的任何更改。

在您的情况下：

{{title(item.code)}}

至

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