Question

我正在处理一个包含2个视图的单页应用程序：主页和仪表板。

'home'州有一个搜索表单。提交表单后，将使用$window.location.assign('/#/dashboard');加载仪表板视图。

当从搜索加载仪表板视图时，我需要自动将选择框值设置为0.我有代码来执行此操作，但由于某种原因，它在页面加载时没有执行...我我认为这与Angular在加载时将新的'select'DOM元素添加到页面有关。

信息中心视图

  <div ng-controller="MainCtrl">

    <!-- list all lists -->
    <select id="list-select" class="list-select" ng-model="list" ng-options="list as list.title for list in lists">
        <option value="">Select List</option>
        <!-- when the page loads from search, this will be added...
        <option value="0">search</option>
        -->
    </select>
    <!-- end list -->

    <hr class="dash">

      <!-- words in selected list -->
      <ol ng-model="list.words">
        <li ng-repeat="word in list.words" id="word-{{word.id}}">
          <p>{{ word.title }}</p>
        </li>
      </ol>
    <!-- end words -->

</div>

main.js

$("#list-select").val("0");

请帮忙！

Answer 1

这里有一个非常相似的问题： how to use ng-option to set default value of select element

不是使用jQuery来设置选择列表的默认值，也许你可以坚持使用角度方法：

<div ng-controller="yourController">
    <select ng-model="prop.value" ng-options="v for v in prop.values">
    </select>
</div>

yourApp.controller('yourController', ['$scope', '$http', function($scope, $http) {
    $scope.prop = { 
        value: 0, 
        values: []
    };

    // not the best way...
    $.getJSON('yourURL', function(data) {
        $scope.prop.values = data;
        $scope.$apply(); // you need to call this
    });

    // the better way
    $http.get('yourURL').success(function(data) {
        $scope.prop.values = data;
    }).error(function(error) {});
}]);

Answer 2

通常，操作控制器中的DOM是不好的做法。每当模型更新时，您的更改都不会成功，并且可能会导致控制器逻辑中出现很多问题。

相反，您希望操纵您在视图中使用的变量。在这种情况下，填充列表数组后，您可以在控制器中执行以下操作：

$scope.lists.splice(0,0,{ value: 0, title: 'search' });

Answer 3

我几乎只是在寻找一种为选择框设置默认值的方法。

我能够使用ng-init完成此操作，基于此answer。

   <!-- list all lists -->
  <select ng-model="list" ng-init="list = lists[0]" ng-options="list as list.title for list in lists">
      <option value="">Select List</option>
  </select>
  <!-- end list -->

这会将选择框值设置为＆＃34; 0＆＃34;。

感谢所有帮助和提示，将此标记为正确答案。

更改Angular模板时执行jQuery语句时出现问题

3 个答案: