Question

所以我在设置此下拉菜单中的值时遇到问题：

angular.module("myApp",[])
.controller("myController", function($scope){
$scope.selected_country = { value: "orig value" }
$scope.countries = [
  { id: 1, nicename: "Philippines", iso: "PH"},
  { id: 2, nicename: "United States", iso: "US"} 
]

$scope.load_states = function(){
  console.log('load states',$scope.selected_country);
  //do post request here to get states
}
});

<html lang="en" ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-controller="myController">
<select ng-model="selected_country" ng-change="load_states()" id="country" name="country" class="form-control" ng-options="data as data.nicename for data in countries" required>
  <option value="">--Select--</option>
</select>
    <section>
    {{selected_country}}
    </section>
    </body>
</html>

我在一个正在处理的项目中有这个确切的代码..在这个例子中它正在工作..但是在我的代码中。我不知道为什么$ console.selected_country在我console.log时没有改变。但是当我在html中打印selected_country（{{selected_country}}）时，我可以看到它改变了值..任何想法为什么？我现在正在磨牙几个小时。

Answer 1

试试这个

angular.module("myApp",[])
.controller("myController", function($scope){
$scope.selected_country = { value: "orig value" }
$scope.countries = [
  { id: 1, nicename: "Philippines", iso: "PH"},
  { id: 2, nicename: "United States", iso: "US"} 
]

$scope.load_states = function(val){
  $scope.selected_country = val;
  console.log('load states',$scope.selected_country);
  //do post request here to get states
}
});

<html lang="en" ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-controller="myController">
<select ng-model="selected_country" ng-change="load_states(selected_country)" id="country" name="country" class="form-control" ng-options="data as data.nicename for data in countries" required>
  <option value="">--Select--</option>
</select>
    <section>
    {{selected_country}}
    </section>
    </body>
</html>

Answer 2

试试这个 $scope.selected_country = { id: 1, nicename: "Philippines", iso: "PH"}

$scope.selected_country类型应与$scope.countries

的对象相同

Answer 3

＆＃13;

angular.module("myApp",[])
.controller("myController", function($scope){
$scope.countries = [
  { id: 0, value: "--Select--", iso: "OV"},
  { id: 1, value: "Philippines", iso: "PH"},
  { id: 2, value: "United States", iso: "US"} 
];
$scope.selected_country = $scope.countries[0];

$scope.load_states = function(val){
  $scope.selected_country = val;
  console.log('load states',$scope.selected_country);
  //do post request here to get states
}
});

＆＃13;

<html lang="en" ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-controller="myController">
<select ng-model="selected_country" ng-change="load_states(selected_country)" id="country" name="country" class="form-control" ng-options="data as data.value for data in countries track by data.id" required>
</select>
    <section>
    {{selected_country}}
    </section>
    </body>
</html>

＆＃13;

Answer 4

我想在你的真实代码中，下拉列表是在创建子范围的其他容器内。因此，您的selected_country未设置在控制器自己的范围内，而是设置在某个控件的范围内。这就是为什么你看到它在片段中工作的原因，但它在你的项目中不起作用。这是他们经常建议使用controllerAs语法的原因之一，您可以将此变量称为vm.selected_country，并且它将在正确的范围内。

您可以在控制器中创建一些容器变量（如$scope.vm = {};）并在其上设置selected_country。它应该工作。

<select ng-model="vm.selected_country" ng-change="load_states()" id="country" name="country" class="form-control" ng-options="data as data.nicename for data in countries" required>

但这只是为了确认问题，因为使用controllerAs更多是建筑决策。

-----编辑------

查看下面编辑的片段（运行它），你会发现在子范围内它不再有效。

＆＃13;

angular.module("myApp",[])
.controller("myController", function($scope){
$scope.selected_country = { value: "orig value" }
$scope.countries = [
  { id: 1, nicename: "Philippines", iso: "PH"},
  { id: 2, nicename: "United States", iso: "US"} 
]

$scope.load_states = function(){
  console.log('load states',$scope.selected_country);
  //do post request here to get states
}
});

＆＃13;

<html lang="en" ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-controller="myController">
<div ng-if="true"> <!-- create child scope -->
<select ng-model="selected_country" ng-change="load_states()" id="country" name="country" class="form-control" ng-options="data as data.nicename for data in countries" required>
  <option value="">--Select--</option>
</select>
</div>
    <section>
    {{selected_country}}
    </section>
    </body>
</html>

＆＃13;

现在使用vm变量，尽管有子范围，它仍然有效：

＆＃13;

angular.module("myApp",[])
.controller("myController", function($scope){
$scope.vm = {};
$scope.vm.selected_country = { value: "orig value" }

$scope.countries = [
  { id: 1, nicename: "Philippines", iso: "PH"},
  { id: 2, nicename: "United States", iso: "US"} 
]

$scope.load_states = function(){
  console.log('load states',$scope.vm.selected_country);
  //do post request here to get states
}
});

＆＃13;

<html lang="en" ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-controller="myController">
<div ng-if="true"> <!-- create child scope -->
<select ng-model="vm.selected_country" ng-change="load_states()" id="country" name="country" class="form-control" ng-options="data as data.nicename for data in countries" required>
  <option value="">--Select--</option>
</select>
</div>
    <section>
    {{vm.selected_country}}
    </section>
    </body>
</html>

＆＃13;

Answer 5

修改您的代码如下：

$ans_checked=array_map('trim', explode(',',$answered));

这样可行。

Demo

Angularjs与下拉列表的模型绑定问题

5 个答案: