Question

我尝试这样做，因为本文建议让选择选项在AngularJS中运行。 http://gurustop.net/blog/2014/01/28/common-problems-and-solutions-when-using-select-elements-with-angular-js-ng-options-initial-selection/

然而，我已经搞砸了一些如何。这是代码的fiddlerjs http://jsfiddle.net/8faa5/

这是HTML

<!DOCTYPE html>
<html class="no-js" data-ng-app="TestModule">
<head>
    <title></title>
</head>
<body data-ng-controller="TestController">

    <h3>Test Select</h3>
    Current Value: {{ ourData.CurrentSelected}} <br>

    <select ng-init="ourData._currVal = {Value: ourData.CurrentSelected}"
            ng-change="ourData.CurrentSelected = ourData._currVal.Value"
            ng-model="ourData._currVal"
            ng-options="oneItem.Value as oneItem.Disp
        for oneItem in ourData.StuffForDropDown track by oneItem.Value"></select>

    <!-- Get Javascript  -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="js/data.js"></script>
</body>
</html>

这是js / data.js

(function() {
    "use strict";

    var smallData = {
        StuffForDropDown: [
            {
                Disp: "01-Prospect",
                Value: 5
            },
            {
                Disp: "02-Constituet Issue",
                Value: 10
            }
        ],
        CurrentSelected: "10"
    };

    var myModule = angular.module("TestModule", ['ui.mask']);

    myModule.controller("TestController", ["$scope",
        function ($scope){
            $scope.ourData = smallData;
        }
    ]);

})();

Answer 1

首先，你的jsfiddle搞砸了。您已经定义了两次angularjs，一次在jsfiddle选项中，第二次在代码中。你的代码也过于复杂。我对您jsfiddle中的代码进行了简单的重写。

<div data-ng-app="TestModule">
    <div data-ng-controller="TestController">
         <h3>Test Select</h3>
Current Value: {{ ourData._currval}}
        <br>
        <select ng-init="ourData._currVal = {Value: ourData.CurrentSelected}" 


        ng-model="ourData._currval" ng-options="oneItem.Value as oneItem.Disp
        for oneItem in ourData.StuffForDropDown"></select>

    </div>
</div>


(function () {
    "use strict";

    var smallData = {
        StuffForDropDown: [{
            Disp: "01-Prospect",
            Value: 5
        }, {
            Disp: "02-Constituet Issue",
            Value: 10
        }],
        CurrentSelected: "10"

    };

    var myModule = angular.module("TestModule", []);

    myModule.controller("TestController", ["$scope",

    function ($scope) {
        $scope.ourData = smallData;
    }]);

})();

**编辑：好的，我根据您在评论中的新请求修改了我的代码。代码如下（new plunker）

<div data-ng-app="TestModule">
    <div data-ng-controller="TestController">
         <h3>Test Select</h3>
Current Value: {{ currentItem.Value}}
        <br>
        <select ng-model="currentItem" ng-options="u as u.Disp for u in items track by u.Value"></select>
    </div>
</div>

(function () {
    "use strict";

    var myModule = angular.module("TestModule", []);

    var ctrl = function ($scope) {
        $scope.items = [{
            Disp: "01-Prospect",
            Value: 5
        }, {
            Disp: "02-Constituet Issue",
            Value: 10
        }];

        $scope.currentItem = $scope.items[1];
    };

    myModule.controller("TestController", ctrl)

})();

我无法在angularjs中正确选择

1 个答案: