Angular Js无法将数据推入控制器数组

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-reeat、ng-if或ng-include之类的事情时，它们每个都会创建一个新的作用域。这意味着，当您尝试绑定到该作用域的根级别上的基元时，它将在更新值时获得解引用。所以，你需要把你的基元放在一个对象里面。John Papa的风格指南建议在您的作用域上创建一个"vm"属性。vm代表视图模型。

以下是如何使用它的技巧

http://jsfiddle.net/fbLycnpg/

vm.newState