Question

HTML： -

<div ng-controller="countryController">
        {{name}}
         <ul>
            <li ng-repeat="country in countries">
                {{ country.name }}
                <ul ng-show="country.states.length > 0">
                    <li ng-repeat="state in country.states">
                        {{ state.name }}
                    </li>
                </ul>
                <input type="text" ng-model="newState">
                <a href ng-click="addStateState(country)">Add </a>
                {{newState}}
            </li>
         </ul>
    </div>

当我键入newState模型时，它出现在客户端。现在我尝试将该值转换为控制器并尝试推入状态数组，它无法添加到状态数组中。

JS控制器： -

myApp.factory('countryService', function($http){
var baseUrl = 'services/'
return {
    getCountries : function(){
        return $http.get(baseUrl + 'getcountries.php');
    }
};

}）;

myApp.controller('countryController', function($scope, countryService){
countryService.getCountries().success(function(data){
    $scope.countries = data;
});

$scope.addStateState = function(country){
    country.states.push({'name' : $scope.newState});
    $scope.newState = "";
};

}）;

Answer 1

您的主要问题是$ scope.newState在$ scope.newStateState函数中不可用。在$ scope函数中操作像$ scope这样的对象是不好的做法。实际上，您创建的多个多个对象与您注入的$ scope不同;否则，两个不同国家/地区的输入框应匹配。

在下面工作Plunkr。

http://plnkr.co/edit/HG3zWG?p=preview

JS：

angular.module('myApp',[])
.controller('countryController', function($scope){
  $scope.countries = [
      { name: 'USA', states:[
          {name: 'Virginia'},
          {name: 'Utah'}
        ]
      },
      { name: 'Brazil', states:[
          {name: 'Pernabuco'}
        ]
      }
    ];

  $scope.addStateState = function(country, data){
    country.states.push({'name' : data.newState});
    data.newState = "";
  };
});

HTML：

<div ng-controller="countryController">
        {{name}}
               <ul>
        <li ng-repeat="country in countries">
                {{ country.name }}
                          <ul ng-show="country.states.length > 0">
            <li ng-repeat="state in country.states">
                        {{ state.name }}
                    </li>
          </ul>
          <input type="text" ng-model="data.newState" />
          <a href="" ng-click="addStateState(country, data)">Add </a>

                {{data.newState}}
            </li>
      </ul>
    </div>

Answer 2

当您处理诸如ng-repeat，ng-if或ng-include之类的事情时，它们每个都会创建一个新的范围。这意味着当您尝试绑定到该范围的根级别上的原语时，它将在您更新值时获得解引用。因此，您需要将基元放在对象中。 John Papa的风格指南建议在您的示波器上制作“vm”属性。 vm代表视图模型。

这是一个如何使用它的jsfiddle。

http://jsfiddle.net/fbLycnpg/

vm.newState

Angular-Js无法将数据推送到控制器数组中

2 个答案: