Question

我正在尝试使用Angular中的选择框。我遇到的问题是使用ng-init并从运行时创建的对象设置它的默认值。继承我的代码：

        <select 
            ng-model="settings.editing.panel.data.production_company"
            ng-change="settings.editing.panel.data.production_company = selectValue"
            ng-init="selectValue = settings.editing.panel.data.production_company"  
        >
            <option 
                ng-repeat="(key, value) in lists.production_companies" 
                value="{{key}}"
                ng-selected="{{selectValue}}" 
                >
                    {{value}}
                </option>
        </select>

“lists.production_companies”是一个简单的键值数组，在初始页面渲染过程中填充，由ajax更新。

对象“settings.editing.panel.data”的生命周期为NULL，但后来加载了一个包含属性“production_company”的格式正确的对象。

我发现将ng-init设置为“ng-init =”selectValue = 3“正常工作。设置$ scope.test = 3，然后设置”ng-init =“selectValue = test”也可以正常工作

但是，我的动态值不起作用。如何使用我动态创建的对象在运行时使用我的设置设置此选择框的值？

Answer 1

你的问题让我感到困惑。以下代码段是working，你想要的是什么？

'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
  $scope.lists={
  	production_companies: { "0": "prod 1", "1":"prod_2" },
  };
  $scope.settings={
  	editing: {
    	panel: {
      	data: null
      }
    }
  };
  $scope.setData=function(data){
    $scope.settings.editing.panel.data={
      production_company: data
    };
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
  <option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>

Answer 2

<select 
            ng-model="settings.editing.panel.data.production_company"
            ng-options = "option as option.keyName for option in list.production_companies"
        > <!--set keyName equal to your object's key-->

        </select>

然后在您的控制器中

$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign

Answer 3

在我的情况下，我能够更改后端数据格式以设置如下对象：

{"id": 1, "name":"prod comp 1"}

然后相应地更改我的选择模型。事后我无论如何都需要这个ID。

<select 
    ng-model="settings.editing.panel.data.production_company"
>
    <option 
        ng-repeat="option in settings.lists.production_companies" 
        value="{{option.id}}"
        ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
    >
        {{option.name}}
    </option>
</select>

Angular select，ng-init具有动态值

3 个答案: