加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 选择角度:选定的值

发布时间:2020-12-17 06:50:18 所属栏目:安全 来源:网络整理
导读:我有一个关于在选择的小部件和AngularJS的组合中设置ng-model的问题(参见此视频: https://www.youtube.com/watch?v=8ozyXwLzFYs) 我想要做的是将收件人设置为一些可以预先选择的值.这个例子的HTML和JS(来自视频) h1Chosen/h1 select data-placeholder="Choo
我有一个关于在选择的小部件和AngularJS的组合中设置ng-model的问题(参见此视频: https://www.youtube.com/watch?v=8ozyXwLzFYs)

我想要做的是将收件人设置为一些可以预先选择的值.这个例子的HTML和JS(来自视频)

<h1>Chosen</h1>
  <select data-placeholder="Choose a Recipient" multiple class="span4 chzn-select" chosen
      ng-model="recipients" ng-options="recipient.name for recipient in recipientsList">
  </select>

  <p ng-repeat="recipient in recipients"><strong>{{recipient.name}}</strong></p>

和控制器中的JS

$scope.recipientsList = [];
    $scope.recipients = [];
    $scope.fetchRecipients = function() {
        $http.get($scope.url).then(function(result){

       $scope.recipientsList = [
    {"id":0,"name":"Recipient 0"},{"id":1,"name":"Recipient 1"},{"id":2,"name":"Recipient 2"},{"id":3,"name":"Recipient 3"},{"id":4,"name":"Recipient 4"},{"id":5,"name":"Recipient 5"},{"id":6,"name":"Recipient 6"},{"id":7,"name":"Recipient 7"},{"id":8,"name":"Recipient 8"},{"id":9,"name":"Recipient 9"},{"id":10,"name":"Recipient 10"}
];
     $scope.recipients = [{"id":0,"name":"Recipient 1"}];
     });
  }

    $scope.fetchRecipients();

我尝试了一些组合但菜单中的值没有预先选择,尽管它们存储在收件人中,因为它们在菜单下方可见.你可以在这里看到这个例子:
http://jsfiddle.net/YKZSw/8/

谢谢你的激光.

马捷

解决方法

AngularJS ngOptions属性从作为数据源提供的数组中选择一个元素.在您的情况下,recipientsList数组包含一定数量的对象.然而,由于对象不平等,即使它们相似,您希望预选的元素也不会出现在列表中.
含义recipientsList:{“id”:0,“name”:“Recipient 0”}不等于收件人:{“id”:0,“name”:“Recipient 0”}(您可以在JS中尝试相同)安慰). Angular在列表中找不到元素,因此不会预先选择.

这个修改过的小提琴有效:http://jsfiddle.net/mananbharara/YKZSw/9/
这种情况的唯一区别在于收件人定义:

$scope.recipients = [$scope.recipientsList [0],$scope.recipientsList [1]];

在这种情况下,您有一个列表,选定的值只能来自该列表.

如果必须维护两个列表,则可以使用此方法的替代方法是将选择值保留为基本类型.在这种情况下,原始相等总是成立.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读