Question

我遇到了选择问题。我有一个利用profileCtrl的个人资料视图。在该控制器中，我从db获取用户信息并将其放入范围。我还使用服务从db中的配置表中获取所有信息并将其插入rootScope。我的问题和答案来自配置表（rootScope），用户选择的答案来自用户信息（范围）。我需要一个select来预选用户在db中的任何答案。以下是我的代码。

配置文件控制器：

app.controller('profileCtrl', function ($scope, $log, $http, $timeout, Data, Auth, dataShare, $sessionStorage, $rootScope, $confirm) {
    $timeout(function() {

      // get user's info from db and put it into scope
      Data.get('profile/'+$rootScope.user.uid).then(function(data){
        $scope.profs = data.data;
        $scope.buttonText = 'Update Profile';
      });

    }, 100);

    // get the configs from the configs service and put it in the rootScope
    dataShare.getconfigs().then(function(data){
        $rootScope.configs = data;

        // get the answers from the config table for the select's options
        $scope.availableAnswers = [
            { answer: $rootScope.configs[0].a1 }, 
            { answer: $rootScope.configs[0].a2 },
            { answer: $rootScope.configs[0].a3 }, 
            { answer: $rootScope.configs[0].a4 },
            { answer: $rootScope.configs[0].a5 }
          ];
    });

    // function executed on change from the select
    $scope.selectedItemChanged = function() {
      $log.log($scope.selectedAnswer);
    }

    // inline edit title
    $scope.updateUser = function(data) {
      Data.put('config/'+data.id, {profile_page_title:data.profile_page_title}).then(function (result) {
          Data.toast(result);
      });
    };

    $scope.saveProfile = function (profile) {

        profile.roles = $rootScope.user.roles;

        if(profile.uid.length > 0){
            Data.put('profile/'+profile.uid, profile).then(function (result) {
              $sessionStorage.user = profile;    
              $rootScope.user = $sessionStorage.user;
              Data.toast(result);
            });
        }else{
            Data.post('profile', profile).then(function (result) {
              $rootScope.name = profile.name
              Data.toast(result);
            });
        }

    };
});

HTML :(我已经压缩了代码以便于阅读）

<section class="row" id="" ng-repeat="profile in profs">
    <div class="col-xs-12" id="questionWidget">

      <h4>{{configs[0].question}}</h4>

      <!-- user's answer from db -->
      {{profs[0].answer}}

      <select ng-model="selectedAnswer" ng-change="selectedItemChanged()" ng-options="a.answer for a in availableAnswers">

      </select>

    </div>
</section>

Answer 1

好吧，所以我做了一个插件，这就是我想出来的。如果教授的当前答案存在于列表中，这将设置选择选项。

ng-init不起作用的原因是因为selectedAnswer模型实际上期望看到具有属性“answer”的对象。换句话说，selectedAnswer是整个对象，而不仅仅是答案本身。

https://plnkr.co/edit/CRraZXY2jsmiV1oJx6VN?p=preview

    $scope.profs = [
        { answer: 'answer2' }
      ]


    $scope.availableAnswers = [
          { answer: 'answer1' },
          { answer: 'answer2' },
          { answer: 'answer3' },
        ];


   angular.forEach($scope.availableAnswers, function(availableAnswer){

     if ($scope.profs[0].answer === availableAnswer.answer)
      $scope.selectedAnswer = availableAnswer
   });

- 旧答案 -

你试过ng-init吗？
ng-init="selectedAnswer = profs[0].answer"

Answer 2

我做了一个非常复杂的傻瓜，我想比@brianslattery慢一点。

这是我的看法： https://plnkr.co/edit/5fnB6oWrZ9WhujN7eH0T?p=preview

<section class="row" id="" ng-repeat="profile in profs">
  <div class="col-xs-12" id="questionWidget">

    <h4>{{configs[0].question}}</h4>

    <!-- user's answer from db -->
    Answer: {{profile.answer}}<br>

    <select name="selector" ng-model="profile.answer" ng-change="selectedItemChanged(profile)" ng-options="a as a.answer for a in availableAnswers track by a.answer">

    </select>

  </div>
</section>

该应用程序将如下所示：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($rootScope, $scope, $timeout, $log, $filter) {

  $timeout(function() {
    // get user's info from db and put it into scope
    $scope.profs = [ { name: 'prof1', answer: 'a3' }, { name: 'prof2', answer: 'a2' } ];
    $scope.buttonText = 'Update Profile';
    appendAnswerObjects();
  }, 100);

  // get the configs from the configs service and put it in the rootScope
  $timeout(function(data){
    $rootScope.configs = [ { question: 'Question?', a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4', a5: 'a5' } ];

    // get the answers from the config table for the select's options
    $scope.availableAnswers = [
      { answer: $rootScope.configs[0].a1 }, 
      { answer: $rootScope.configs[0].a2 },
      { answer: $rootScope.configs[0].a3 }, 
      { answer: $rootScope.configs[0].a4 },
      { answer: $rootScope.configs[0].a5 }
    ];

    appendAnswerObjects();
  }, 200);

  // function executed on change from the select
  $scope.selectedItemChanged = function(profile) {
    $log.log(profile);
  }

  function appendAnswerObjects() {
    if($scope.profs && $scope.profs.length && $scope.availableAnswers && $scope.availableAnswers.length) {
      $scope.profs.forEach(function(profile) {
        profile.answer = $filter('filter')($scope.availableAnswers, { answer: profile.answer })[0];
      });
    }
  }

});

有几个问题需要考虑。 NgOptions喜欢使用对象而不是值。此外，您的重复＆＃39;正在呼吁 profs [0] ，而不是使用现在重复的个人资料变量。

要考虑的其他问题是您的回答＆＃39;不会依赖于个人资料，但是对于整个范围来说都是一个，我很确定这不是你想要的。

所以，我创建的那个plunkr为每个人提供了个人答案。它还考虑了首先获取配置文件或首先获得可用答案的可能性，无论哪个首先出现，我相信这是重要的。

如果这有帮助，请告诉我。最好的问候，

拉法。

使用ng-options和ng-selected进行角度选择

2 个答案: