AngularJS - 预先选择的drobox问题

时间:2018-03-02 10:36:10

标签: angularjs

我在预先选择的选择框中遇到问题, 在以下格式存储的所选主题的数据库字段值中:["12","3","37"]

PHP代码从数据库中读取值:

$data['classSubject']=json_decode($data['subjects'],true);

然后将其传递给app.js文件:

 $scope.edit = function(id) {
   showHideLoad();
   dataFactory.httpRequest('index.php/students/'+id).then(function(data) {
     $scope.changeView('edit');
     $scope.form = data;
     $scope.SelectedSubjects = data.classSubject;             
     console.log(data.classSubject);
     showHideLoad(true);
   });
 }

和HTML文件:

<select class="form-control selecBox" name="classSubject[]" multiple required id="classSubj"> 
  <option ng-repeat="subject in form.allsubjects track by $index" value="{{subject.id}}" ng-selected="form.classSubject.indexOf(subject.id)>-1">{{subject.subjectTitle}}</option> 
</select>

我面临的一个重大问题是:

  1. 当我传递所选主题的值($data['classSubject']=json_decode($data['subjects'],true);
  2. 如果读取为简单字符串,则不会从选择框中预选:

    $data['classSubject']=$data['subjects']
    

    然后(ng-selected="form.classSubject.indexOf(subject.id)>-1")有效,但选择了错误的条目,我认为预选的主题["3"]选择了value="3"value="37"两个选项,甚至38,39等等上。

    请让我知道发生这种情况的原因!

1 个答案:

答案 0 :(得分:0)

是的,默认突出显示不适用于任何stackover的代码编辑器角度版本。但适用于最新稳定版 1.6.9 。请检查您的角度版本。

angular
.module('sample', [])
.controller('simpleController', ['$scope', function($scope) {
  $scope.options = [
    {value: '1', name: 'option 1'},
    {value: '2', name: 'option 2'},
    {value: '3', name: 'option 3'},
    {value: '4', name: 'option 4'},
    {value: '5', name: 'option 5'}
  ];
  $scope.selectedOptions = ['1', '4'];
		
  $scope.intOptions = $scope.options.map(m => ({value: Number(m.value), name: m.name}));
  $scope.selectedIntOptions = [1, 4];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="sample" ng-controller="simpleController">
  <hr>
  <label for="multipleoptionsasstring"> Multiple select with values as string: </label><br>
  <select name="multipleoptionsasstring" ng-model="selectedOptions" multiple>
    <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
  </select>
  <div>selected : {{selectedOptions}}</div>

  <hr>
  <label for="multipleoptionsasint"> Multiple select with values as int: </label><br>
  <select name="multipleoptionsasint" ng-model="selectedIntOptions" multiple>
    <option ng-repeat="option in intOptions" ng-value="option.value">{{option.name}}</option>
  </select>
  <div>selected : {{selectedIntOptions}}</div>
</div>