2015-01-14 4 views
0

Я пытаюсь создать форму angularjs с двумя полями, одним текстовым вводом и выбором. По умолчанию ввод текста пуст, но выбор должен иметь значение (первый элемент для выбора). Я следую за документами angularjs form и используя главный объект, который при перезагрузке копируется в модель страницы. Вот что, если я установил что-то по умолчанию, оно пусто. Если я сделаю то же самое с текстовым полем, оно отобразит значение по умолчанию. Ниже вы найдете мой код и вот plunker. Я думаю, что это может быть связано с копией, сделанной в функции сброса, но я печатаю объект на консоли в этот момент, и похоже, что он копируется. Если я попытаюсь сделать это без основного материала, просто установив его прямо на пользователя и не вызываю сброс, он работает нормально.Форма AngularJS - значение по умолчанию для выбора

контроллер

(function(angular) { 
    'use strict'; 
angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.master = {}; 

    $scope.businessUnits = [{"businessUnitId":1,"name":"Auto"},{"businessUnitId":2,"name":"Life"},{"businessUnitId":3,"name":"Health"},{"businessUnitId":4,"name":"Surety"},{"businessUnitId":5,"name":"Finance"},{"businessUnitId":6,"name":"Dwelling"}]; 
    $scope.master.businessUnit = $scope.businessUnits[0]; 
    $scope.master.name = "John"; 

    $scope.update = function(user) { 
     $scope.master = angular.copy(user); 
    }; 

    $scope.reset = function(form) { 
     if (form) { 
     form.$setPristine(); 
     form.$setUntouched(); 
     } 
     $scope.user = angular.copy($scope.master); 
     console.debug($scope.user.businessUnit); 
    }; 
    $scope.reset(); 
    }]); 
})(window.angular); 

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-example33-production</title> 


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
    <script src="script.js"></script> 



</head> 
<body ng-app="formExample"> 
    <div ng-controller="ExampleController"> 
    <form name="form" class="css-form" novalidate> 
    Name: 
    <input type="text" ng-model="user.name" name="uName" required="" /> 
    <br /> 
    <div ng-show="form.$submitted || form.uName.$touched"> 
     <div ng-show="form.uName.$error.required">Tell us your name.</div> 
    </div> 

    E-mail: 
    <input type="email" ng-model="user.email" name="uEmail" required="" /> 
    <br /> 
    <div ng-show="form.$submitted || form.uEmail.$touched"> 
     <span ng-show="form.uEmail.$error.required">Tell us your email.</span> 
     <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> 
    </div> 
<select class="form-control" ng-model="user.businessUnit" ng-options="unit as unit.name for unit in businessUnits" required></select> 
    Gender: 
    <input type="radio" ng-model="user.gender" value="male" />male 
    <input type="radio" ng-model="user.gender" value="female" />female 
    <br /> 
    <input type="checkbox" ng-model="user.agree" name="userAgree" required="" /> 

    I agree: 
    <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" /> 
    <br /> 
    <div ng-show="form.$submitted || form.userAgree.$touched"> 
     <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> 
    </div> 

    <input type="button" ng-click="reset(form)" value="Reset" /> 
    <input type="submit" ng-click="update(user)" value="Save" /> 
    </form> 
</div> 
</body> 
</html> 

ответ

1

Добавьте следующий код в <select>

ng-init="user.businessUnit = businessUnits[0]" 

Он должен выглядеть следующим образом:

<select class="form-control" ng-model="user.businessUnit" ng-init="user.businessUnit = businessUnits[0]" ng-options="unit as unit.name for unit in businessUnits" required></select> 
+0

Это было. Любая идея, почему он не установил ее через функцию сброса контроллера? – jarz

Смежные вопросы