Question

我收到的是给定ID的客户，客户详细信息是客户{0,1}的名称，电子邮件和类型。 对于0，客户将是常规的，1将是临时的。

我可以在表单上显示客户的详细信息，但能够选择客户类型。我的选择选项显示{'regular'，'temporary'}，但不选择任何选项值。

例如

customer1={'name':'john', 'email':'john@gmail.com', 'customer_type':0}

表格可以显示姓名和电子邮件，但不能选择'常规'选项

控制器

   $scope.customers_type=['regular','temporary'];
   //I will get details of customer
   $scope.customer=getCustomer($scope.id);

   if($scope.customer.customer_type ==0)
      $scope.customer.type=$scope.customers_type[0]     
    else
      $scope.customer.type=$scope.customers_type[1]

HTML

 <div>
     <label for="Name">Name </label>
     <input  ng-model='customer.name' name="Name" type="text">
  </div>
  <div>
     <label for="email">Email </label>
     <input  ng-model='customer.email' name="email" type="text">
  </div>
  <div>
     <label for="enterprise">Type of type of Customer </label>
     <select ng-model='customer.type'  type="text"  ng-options="type for type in customers_type">
     </select>
  </div>

Answer 1

代码工作正常，angularjs 1.2.23

没有任何错误

刚刚将getCustomer方法替换为对象。

如果它不起作用，那么检查客户对象使用断点并检查它是否正确，并检查您正在使用的angularjs版本。

＆＃13;

angular.module("myApp", []).controller('MyContrl', function($scope) {
  $scope.customers_type = ['regular', 'temporary'];
  //I will get details of customer
  $scope.customer = {
    'name': 'john',
    'email': 'john@gmail.com',
    'customer_type': 0
  };

  if ($scope.customer.customer_type === 0) {
    $scope.customer.type = $scope.customers_type[0]
  } else {
    $scope.customer.type = $scope.customers_type[1]
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyContrl">
  <div>
    <label for="Name">Name</label>
    <input ng-model='customer.name' name="Name" type="text">
  </div>
  <div>
    <label for="email">Email</label>
    <input ng-model='customer.email' name="email" type="text">
  </div>
  <div>
    <label for="enterprise">Type of type of Customer</label>
    <select ng-model='customer.type' type="text" ng-options="type for type in customers_type">
    </select>
  </div>
</div>

＆＃13;

Answer 2

我认为您需要指定<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-inverse navbar-custom"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>  <div class="collapse navbar-collapse" id="bs-1"> <ul class="nav navbar-nav"> <li class="edit"><a href="@Url.Action(" Index ", "WidgetPage ")" class="navbar-link">This is a Title </a> </li> <li class="edit"><a href="@Url.Action(" Edit ", "WidgetPage ", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"></span></a> </li> <li class="edit"><a href="@Url.Action(" Delete ", "WidgetPage ", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span></a> </li> <li> <a href="@Url.Action(" Create ", "WidgetPage ")"> <span class="glyphicon glyphicon-plus"></span> </a> </li> </ul> </div>  </div>  </nav> <hr> <div class="alert alert-info"> <h3>Updated NAVBAR</h3> </div> <nav class="navbar navbar-inverse navbar-edit"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>  <div class="collapse navbar-collapse" id="bs-2"> <ul class="nav navbar-nav"> <li class="edited"><a href="#" class="navbar-link">This is a Title </a> <span class="edit-link"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"> </span> </a> </span> <span class="edit-link"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span> </a> </span> </li> <li> <a href="#"> <span class="glyphicon glyphicon-plus"></span> </a> </li> </ul> </div>  </div>  </nav>并将其设置为您当前的客户类型。如果您没有指定ng-selected，则最终会有3个选项：＆＃39;＆＃39;，＆＃39;常规＆＃39;，＆＃39;临时＆＃39;

在控制器中使用ng-options时如何设置选项的值？

2 个答案: