代码之家 › 专栏 › 技术社区 › Learning-Overthinker-Confused

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

angularjs javascript

Learning-Overthinker-Confused · 技术社区 · 6 年前

$scope.Types 里面 $scope.obj . 它应该有属于 $范围.类型 $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 回复 | 直到 6 年前

Abhishek Kumar Seth 6 年前

 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>

holydragon 6 年前

这样地?

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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前