Question

我正在努力与angularJS一起使用ngRepeat进行选择。我选择这种方式是因为我收到的数据是：

{ 
"id": "day-pro", 
"data": [ 
        { "countries": [ "FRANCE", "SPAIN","GERMANY"] }, 
        { "country": "FRANCE", 
         "achieved": [ 4, 12, 23, 24, 24, 27, 35, 41 ], 
         "target": [ 56, 72, 79, 89, 92, 99, 100, 100 ] 
         } ]}

我使用的指令模板是：

<div ng-controller="hBarController">
    <select id="sel-day-pro" class="frm-drop" data-ng-change="selectCountry($event)">
        <option data-ng-repeat="opt in Countries">{{opt}}</option>
    </select>
<div class="daily-progress-chart">Select a country</div>

在daily-progress-chart div中，它将是选择时绘制的图表。

我遇到的错误是该指令需要ngModel，但是将其插入require：＆＃34; ^ ngModel＆＃34;不解决它。

Angular指令：

App.directive('myFrmContent', function () {
    return {
        restrict: "E",
        require: '^ngModel',
        template: "<div ng-include=\"getTemplateUrl()\"></div>",
        controller: function ($scope) {
            $scope.getTemplateUrl = function () {
                var btnID = '';
                if ($scope && $scope.widget && $scope.widget.id) {
                    btnID = $scope.widget.id;
                }
                return "htmlTemplates/" + btnID + ".html" || '';
            };
        }
    };
});

Answer 1

你实际上错过了错误：

需要ng-model的指令是ng-change。

注意：在选择中使用ng-model（例如ng-model="selectedCountry"）会自动将var（selectedCountry）更新为实际的value（或ng-value ）选项。

ng-change是一个指令，可以对ng-model变量进行一些操作。这就是它需要ng-model指令

的原因

你应该最终得到这样的东西：

<div ng-controller="hBarController">
    <select id="sel-day-pro" ng-model="selectedCountry" class="frm-drop" data-ng-change="handleChangeSelectedCountry()">
        <option ng-value="opt" data-ng-repeat="opt in Countries">{{opt}}</option>
    </select>
<div class="daily-progress-chart">Select a country</div>

在你的控制器中：

$scope.handleChangeSelectedCountry = function(){
   //Do something you want to do on each change of the selectedCountry value
   //Do NOT manually set the value of selectedCountry
}

希望它有所帮助。

编辑：这是plunker和更清洁的解决方案

我想出了这个：

<select data-ng-model="selectedCountry" 
        data-ng-options="country for country in data.data[0].countries"
        id="sel-day-pro" class="frm-drop">
</select>
<div>Currently selected {{selectedCountry}}</div>

控制器中没有JS。

如果您需要处理其他内容而不是设置var（selectedCountry），请在答案中按照我的建议高手使用ng-change来处理您所需的行为。

PS：请注意，您的实际JSON强迫我执行此操作data.data[0].countries而不是此data.data.countries

ngChange处理对象数组

1 个答案: