Question

我对角度很新，并且在尝试创建一个基本的＆＃34;待办事项时遇到了一些问题。列出一种应用程序。

侧栏中有各种类别，用户可以单击一个按钮，该按钮会显示一个模式，提示用户输入新类别的名称。此名称用于创建新类别，该类别将推送到预先存在的数组中。

但是，新类别仅在我开始在屏幕上输入另一个文本框或点击另一个标签后出现。

应该相关的代码：

var list = this;

$(document).on("click", ".prompt", function(e) {
bootbox.prompt("What do you want your new category to be?", function(result) {                
    if(result !== null) {
        list.addCategory(result);
    }
});
});

this.addCategory = function(result) {
  if(result.trim() != "") {
    var newCategory = new Category(result);
    list.categories.push(newCategory);
    this.setCategory(newCategory);
  }
};

我似乎无法弄清楚如何将HTML作为代码块发布，但是这里有用于列出类别的指令（categoryCtrl是有问题的控制器）： ng-class="{active: categoryCtrl.isSet(category) }" ng-repeat="category in categoryCtrl.categories" ng-init="categoryCtrl.currCategory = categoryCtrl.categories[0]"

我知道阵列正在立即更新 - 如果我添加警报＆＃39; bootbox.alert（list.categories [list.categories.length-1] .name）＆＃39;警报给了我任何输入就像它应该的那样。它只是没有出现在ng-repeat中。

另一个有趣的观察是ng-init会覆盖this.setCategory(newCategory) - 所以看起来当列表确实更新时，它会恢复为ng-init值。

我有一个数组的重复数据的其他地方，当新的数据被推到它上面时它会自动更新。我想知道它是否与bootbox的模态/用法有关 - 在其他任何地方都可以通过复选框添加或者将某些内容键入屏幕上的文本框，这是唯一使用模式的地方。

Answer 1

这是一个有效的plunker based on your code.

该应用程序如下所示。我为该示例初始化了一个带有伪数据的数组，但是一个空数组也可以工作。我使用的vm =这个语法与你的语法类似。当调用$ nbBootbox.prompt时，它返回一个promise，所以你需要使用then（）语法，如下所示：

var app = angular.module('plunker', ['ngBootbox']);

    app.controller('MainCtrl', ['$scope', '$ngBootbox', function($scope, $ngBootbox) {
      var vm = this;

      vm.name = 'World';
      vm.categories = ['Category 1', 'Category 2'];

      vm.prompt = function() {

        $ngBootbox.prompt('Enter a new category?')
          .then(function(result) {
            console.log('Prompt returned: ' + result);
            vm.categories.push(result);
          }, function() {
            console.log('Prompt dismissed!');
          });

      }
    }]);

为了使你的HTML更加有棱角，就像我将其更改为此并使用ControllerAs语法：

<body ng-controller="MainCtrl as vm">
  <p>Hello {{vm.name}} !</p>
  <ul>
    <li ng-repeat="c in vm.categories">{{c}}</li>
  </ul>
  <a href="" ng-click="vm.prompt()">Add Category</a>
</body>

因此，链接调用prompt（）函数...它打开模态，如果你输入类别，我将它推送到类别数组，它会自动添加到页面作为新的项目符号点类别清单。

From the documentation： $ ngBootbox.prompt（MSG）

返回在提交时解析的承诺，如果被解雇则拒绝承诺。

实施例

$ngBootbox.prompt('Enter something')
    .then(function(result) {
        console.log('Prompt returned: ' + result);
    }, function() {
        console.log('Prompt dismissed!');
    });

希望这会有所帮助。让我们知道。

ng-repeat仅在单击另一个选项卡或键入文本框后更新

1 个答案: