无法在下拉控件中设置所选选项

时间:2018-12-03 10:21:59

标签: javascript angularjs

我无法绑定下拉控件中的所选选项。我不希望$scope.Types内的$scope.obj整个对象。它应该只在$scope.Types

中具有$scope.obj.type

var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
   $scope.types =
        [
            { label: "Pizza", value: 1 },
            { label: "Cakes", value: 2 },
            { label: "Pastry", value: 3 }
        ];
        
         $scope.obj = { type : 1 };//I want dropdown selected value to be updated in type variable
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="myApp" ng-controller="MyController">
 <select name="status" ng-model="obj.value"
 ng-options="type.value as type.label for type in types track by type.value">
       <option value="">Select Types</option>
</select>
 </ul>

我在这里做的没错。

2 个答案:

答案 0 :(得分:2)

 var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {

   $scope.obj = {};
   $scope.types =
        [
            { label: "Pizza", value: 1 },
            { label: "Cakes", value: 2 },
            { label: "Pastry", value: 3 }
        ];
         
         $scope.obj.value = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="myApp" ng-controller="MyController">
 <select name="status" ng-model="obj.value"
 ng-options="type.value as type.label for type in types">
       <option value="">Select Types</option>
</select>
 </ul>

答案 1 :(得分:1)

喜欢吗?

var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
   
   $scope.$watch('selectedValue', function(newValue, oldValue) {
        if (newValue){
            $scope.obj.type = newValue.value;
        }
   });
   $scope.types =
        [
            { label: "Pizza", value: 1 },
            { label: "Cakes", value: 2 },
            { label: "Pastry", value: 3 }
        ];
   $scope.obj = { type: 1 };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="myApp" ng-controller="MyController">
 <select name="status" ng-model="selectedValue"
 ng-options="type as type.label for type in types track by type.value">
       <option value="">Select Types</option>
</select>
{{ obj.type}}
 </ul>