Question

演示和代码：http://plnkr.co/edit/9tSbJBAE8qPr7DKeGUla?p=preview

我尝试通过允许用户添加更多标签来使我的标签动态化，但似乎无法获取名称，我想我会将其与ngmodel绑定。

<input type="text" ng-model="NewTabName"/>
<button ng-click="addTab()">Add</button>

JS

$scope.addTab = function(){
    $scope.tabs.push({
        "name" : $scope.NewTabName
    });
    $scope.NewTabName = "";
}

Answer 1

替换：

$scope.tabs.push({
      "name" : $scope.NewTabName
  });
$scope.NewTabName = "";

使用：

$scope.tabs.push({
      "name" : this.NewTabName //Use this instead of $scope
  });
this.NewTabName = ""; //Use this instead of $scope

问题是范围继承，NewTabName属性是在$ scope的子范围上创建的。使用this，我可以访问触发事件的正确的范围。

DEMO

Answer 2

此处更新了plunkr：http://plnkr.co/edit/OpVWtmt0k3LKsMPbGUIY?p=preview

您必须将ng-model绑定到某个对象的属性而不是对象本身。否则它（即角度）可能（在这种情况下）在其他范围内创建一个对象NewTabName，而不是你想象的那样。

$scope.addTab = function(){
    $scope.tabs.push({
        "name" : $scope.NewTabName.text
    });
    $scope.NewTabName.text = "";
}

<input type="text" ng-model="NewTabName.text"/>
<button ng-click="addTab()">Add</button>

将绑定数据推入对象不起作用？

2 个答案: