Question

我一直在研究jsfiddle，我知道我有错误。

我希望能够做的是从URL预先填充ng-options。

有9个下拉菜单，我最好的尝试是将拆分附加到“id”但是没有用。我试图使用$ scope绑定到ng-model。“ng-model name”=某些东西，但因为我需要为计算设置一个初始值，它不会起作用。（因为模型名称是数组，而不是数组中的单个项目。）

我可以向社区寻求帮助吗。

 $("#loadURL").click(function () {
var checkURL = $(location).attr("href")
var fiddleURL = '   http://www.ahoymearty.co.uk/waynestest/menu/links.html?&i&a&a&a&a&b&b&b&c' //temp URL for testing - delete this line on live site

//var domain = checkURL.split('&');     //use this line for live site as it will use the URL
var domain = fiddleURL.split('&');      //delete this line on live site as URL doesnt show properly on JSFiddle


//this bit is wrong as apending doesnt work for angular
        $("#loadedplatform").append('<option value="" selected>' + domain[1] +'</option>')
    $("#loadedweapon").append('<option value="" selected>' + domain[2] +'</option>')
    $("#loadedarmour1").append('<option value="" selected>' + domain[3] +'</option>')     
    $("#loadedarmour2").append('<option value="" selected>' + domain[4] +'</option>')
    $("#loadedarmour3").append('<option value="" selected>' + domain[5] +'</option>')       
    $("#loadedspecial1").append('<option value="" selected>' + domain[6] +'</option>')     
    $("#loadedspecial2").append('<option value="" selected>' + domain[7] +'</option>')
    $("#loadedspecial3").append('<option value="" selected>' + domain[8] +'</option>')
    $("#loadedtrans1").append('<option value="" selected>' + domain[9] +'</option>')   

 $scope.platform = "level 5" //this is a test to check that loadURL works but the actual ng-model is an array, it doesnt and secondly because of line 73 of this script (added so it can calculate), it changes it back

Answer 1

您可以从URL获取数据并对其进行解析，但您必须确保URL始终相同。我创建了一种根据URL中<select>之间的字符数动态创建&字段的方法。您可以轻松修改它以满足您的需求。

＆＃13;

(function() {
  var app = angular.module("TestModule", []);

  var TestController = function() {
      var vm = this;
      var fiddleURL = 'http://www.ahoymearty.co.uk/waynestest/menu/links.html?&i&a&a&a&a&b&b&b&c';

      var shortURL = fiddleURL.split("&");
      
      vm.selectOptions = [{
        id: "loadedplatform",
        urlChar: "foo"
      }, {
        id: "loadedweapon",
        urlChar: "foo"
      }, {
        id: "loadedarmour1",
        urlChar: "foo"
      }, {
        id: "loadedarmour2",
        urlChar: "foo"
      }, {
        id: "loadedarmour3",
        urlChar: "foo"
      }, {
        id: "loadedspecial1",
        urlChar: "foo"
      }, {
        id: "loadedspecial2",
        urlChar: "foo"
      }, {
        id: "loadedspecial3",
        urlChar: "foo"
      }, {
        id: "loadedtrans1",
        urlChar: "foo"
      }, ];

      for(var i = 0; i < vm.selectOptions.length; i++){
        vm.selectOptions[i].urlChar = shortURL[i + 1]; // i + 1 because shortURL at 0 contains the url before the first &. Can easily be modified to ignore this
      }
    } // End of TestController


  app.controller("TestController", [TestController]);
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="TestModule">

<head>
  <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="TestController as vm">
  <div ng-repeat="select in vm.selectOptions">
    
    <label for="{{ select.id }}">{{ select.id }}</label>
    <select id="{{ select.id }}">
      <option value="{{ select.urlChar }}" selected>{{ select.urlChar }}</option>
    </select>
    <br />
  </div>
</body>

</html>

＆＃13;

此示例假定您要按顺序分配URL中的字符。如果您不想，则可能需要更改vm.selectedOptions中对象的顺序。

修改

如果要以 jQuery 方式追加某些元素，可以使用AngularJS's way of doing it。致电angular.element('someid').append('something');

更改按钮单击时的ng选项

1 个答案: