如何添加btorfs多选占位符更改默认文本选择选择国家？

Question

请给我解决方案如何在btorfs中添加占位符multiselect Angular js？

我的编码。

<multiselectdrop ng-model="blogadd.country" options="countryList" display-prop="country_name" search-limit="countryListCount" id-prop="country_name" show-select-all="true" show-unselect-all="true" name="country" header-text="Select Stuff1" required ng-change="check_blogcountry(blogadd.country)"> 
          </multiselectdrop> 

上午检查标题文本和标题它不工作，一旦我添加页眉手段得到了错误，如下面，

multiselect] asking for template on: <header got error like these 

(function() { 
'use strict'; 

    var multiselect = angular.module('btorfs.multiselect',  ['btorfs.multiselect.templates']); 

multiselect.getRecursiveProperty = function (object, path) { 
    return path.split('.').reduce(function (object, x) { 
     if (object) { 
      return object[x]; 
     } else { 
      return null; 
     } 
    }, object) 
}; 

    multiselect.directive('multiselectdrop', ['$filter', '$document', '$log', '$interval', function ($filter, $document, $log, $interval) { 
    return { 
     restrict: 'AE', 
     scope: { 
      options: '=', 
      displayProp: '@', 
      idProp: '@', 
      searchLimit: '=?', 
      selectionLimit: '=?', 
      showSelectAll: '=?', 
      showUnselectAll: '=?', 
      showSearch: '=?', 
      searchFilter: '=?', 
      disabled: '=?ngDisabled' 
     }, 
      require: 'ngModel', 
     templateUrl: 'multiselect.html', 
     link: function ($scope, $element, $attrs, $ngModelCtrl) { 
      $scope.selectionLimit = $scope.selectionLimit || 0; 
      $scope.searchLimit = $scope.searchLimit ; 

      $scope.searchFilter = ''; 

      if (typeof $attrs.disabled != 'undefined') { 
       $scope.disabled = true; 
      } 

      $scope.toggleDropdown = function() { 
       $scope.open = !$scope.open; 
      }; 

      var closeHandler = function (event) { 
       if (!$element[0].contains(event.target)) { 
        $scope.$apply(function() { 
         $scope.open = false; 
        }); 
       } 
      }; 

      $document.on('click', closeHandler); 

      var updateSelectionLists = function() { 
       if (!$ngModelCtrl.$viewValue) { 
        if ($scope.selectedOptions) { 
         $scope.selectedOptions = []; 
        } 
        $scope.unselectedOptions = angular.copy($scope.resolvedOptions); 
       } else { 
        $scope.selectedOptions = $scope.resolvedOptions.filter(function (el) { 
         var id = $scope.getId(el); 
         for (var i = 0; i < $ngModelCtrl.$viewValue.length; i++) { 
          var selectedId = $scope.getId($ngModelCtrl.$viewValue[i]); 
          if (id === selectedId) { 
           return true; 
          } 
         } 
         return false; 
        }); 
        $scope.unselectedOptions = $scope.resolvedOptions.filter(function (el) { 
         return $scope.selectedOptions.indexOf(el) < 0; 
        }); 
       } 
      }; 

      $ngModelCtrl.$render = function() { 
       updateSelectionLists(); 
      }; 

      $ngModelCtrl.$viewChangeListeners.push(function() { 
       updateSelectionLists(); 
      }); 

      $ngModelCtrl.$isEmpty = function (value) { 
       if (value) { 
        return (value.length === 0); 
       } else { 
        return true; 
       } 
      }; 

      var watcher = $scope.$watch('selectedOptions', function() { 
       $ngModelCtrl.$setViewValue(angular.copy($scope.selectedOptions)); 
      }, true); 

      $scope.$on('$destroy', function() { 
       $document.off('click', closeHandler); 
       if (watcher) { 
        watcher(); // Clean watcher 
       } 
      }); 

      $scope.getButtonText = function() { 
       if ($scope.selectedOptions && $scope.selectedOptions.length === 1) { 
        return $scope.getDisplay($scope.selectedOptions[0]); 
       } 
       if ($scope.selectedOptions && $scope.selectedOptions.length > 1) { 
        var totalSelected; 
        totalSelected = angular.isDefined($scope.selectedOptions) ? $scope.selectedOptions.length : 0; 
        if (totalSelected === 0) { 
         return 'Select'; 
        } else { 
         return totalSelected + ' ' + 'selected'; 
        } 
       } else { 
        return 'Select'; 
       } 
      }; 

      $scope.selectAll = function() { 
       $scope.selectedOptions = $scope.resolvedOptions; 
       $scope.unselectedOptions = []; 
      }; 

      $scope.unselectAll = function() { 
       $scope.selectedOptions = []; 
       $scope.unselectedOptions = $scope.resolvedOptions; 
      }; 

      $scope.toggleItem = function (item) { 
       if (typeof $scope.selectedOptions === 'undefined') { 
        $scope.selectedOptions = []; 
       } 
       var selectedIndex = $scope.selectedOptions.indexOf(item); 
       var currentlySelected = (selectedIndex !== -1); 
       if (currentlySelected) { 
        $scope.unselectedOptions.push($scope.selectedOptions[selectedIndex]); 
        $scope.selectedOptions.splice(selectedIndex, 1); 
       } else if (!currentlySelected && ($scope.selectionLimit === 0 || $scope.selectedOptions.length < $scope.selectionLimit)) { 
        var unselectedIndex = $scope.unselectedOptions.indexOf(item); 
        $scope.unselectedOptions.splice(unselectedIndex, 1); 
        $scope.selectedOptions.push(item); 
       } 
      }; 

      $scope.getId = function (item) { 
       if (angular.isString(item)) { 
        return item; 
       } else if (angular.isObject(item)) { 
        if ($scope.idProp) { 
         return multiselect.getRecursiveProperty(item, $scope.idProp); 
        } else { 
         $log.error('Multiselect: when using objects as model, a idProp value is mandatory.'); 
         return ''; 
        } 
       } else { 
        return item; 
       } 
      }; 

      $scope.getDisplay = function (item) { 
       if (angular.isString(item)) { 
        return item; 
       } else if (angular.isObject(item)) { 
        if ($scope.displayProp) { 
         return multiselect.getRecursiveProperty(item, $scope.displayProp); 
        } else { 
         $log.error('Multiselect: when using objects as model, a displayProp value is mandatory.'); 
         return ''; 
        } 
       } else { 
        return item; 
       } 
      }; 

      $scope.isSelected = function (item) { 
       if (!$scope.selectedOptions) { 
        return false; 
       } 
       var itemId = $scope.getId(item); 
       for (var i = 0; i < $scope.selectedOptions.length; i++) { 
        var selectedElement = $scope.selectedOptions[i]; 
        if ($scope.getId(selectedElement) === itemId) { 
         return true; 
        } 
       } 
       return false; 
      }; 

      $scope.updateOptions = function() { 
       if (typeof $scope.options === 'function') { 
        $scope.options().then(function (resolvedOptions) { 
         $scope.resolvedOptions = resolvedOptions; 
         updateSelectionLists(); 
        }); 
       } 
      }; 

      // This search function is optimized to take into account the search limit. 
      // Using angular limitTo filter is not efficient for big lists, because it still runs the search for 
      // all elements, even if the limit is reached 
      $scope.search = function() { 
       var counter = 0; 
       return function (item) { 
        if (counter > $scope.searchLimit) { 
         return false; 
        } 
        var displayName = $scope.getDisplay(item); 
        if (displayName) { 
         var result = displayName.toLowerCase().indexOf($scope.searchFilter.toLowerCase()) > -1; 
         if (result) { 
          counter++; 
         } 
         return result; 
        } 
       } 
      }; 


      $interval(function(){ 
       $scope.resolvedOptions = $scope.options; 
       updateSelectionLists(); 
      },2000); 

      $scope.resolvedOptions = []; 
      if (typeof $scope.options !== 'function') { 
       $scope.resolvedOptions = $scope.options; 
      } else { 
       $scope.updateOptions(); 
      } 

     } 
    }; 
}]); 

}（））;

angular.module('btorfs.multiselect.templates', ['multiselect.html']); 

angular.module("multiselect.html", []).run(["$templateCache",  function($templateCache) { 
$templateCache.put("multiselect.html", 
"<div class=\"btn-group\" style=\"width: 100%\">\n" + 
" <button type=\"button\" class=\"form-control btn btn-default btn-block dropdown-toggle\" ng-click=\"toggleDropdown()\" ng-disabled=\"disabled\">\n" + 
"  {{getButtonText()}}&nbsp;<span class=\"caret\"></span>\n" + 
" </button>\n" + 
" <ul class=\"dropdown-menu dropdown-menu-form\"\n" + 
"  ng-style=\"{display: open ? 'block' : 'none'}\" style=\"width: 100%; overflow-x: auto\">\n" + 
"\n" + 
"  <li ng-show=\"showSelectAll\">\n" + 
"   <a ng-click=\"selectAll()\" href=\"\">\n" + 
"    <span class=\"glyphicon glyphicon-ok\"></span> Select All\n" + 
"   </a>\n" + 
"  </li>\n" + 
"  <li ng-show=\"showUnselectAll\">\n" + 
"   <a ng-click=\"unselectAll()\" href=\"\">\n" + 
"    <span class=\"glyphicon glyphicon-remove\"></span> Unselect All\n" + 
"   </a>\n" + 
"  </li>\n" + 
"  <li ng-show=\"(showSelectAll || showUnselectAll)\"\n" + 
"   class=\"divider\">\n" + 
"  </li>\n" + 
"\n" + 
"  <li role=\"presentation\" ng-repeat=\"option in selectedOptions\" class=\"active\">\n" + 
"   <a class=\"item-selected\" href=\"\" ng-click=\"toggleItem(option); $event.stopPropagation()\">\n" + 
"    <span class=\"glyphicon glyphicon-remove\"></span>\n" + 
"    {{getDisplay(option)}}\n" + 
"   </a>\n" + 
"  </li>\n" + 
"  <li ng-show=\"selectedOptions.length > 0\" class=\"divider\"></li>\n" + 
"\n" + 
"  <li ng-show=\"showSearch\">\n" + 
"   <div class=\"dropdown-header\">\n" + 
"    <input type=\"text\" class=\"form-control input-sm\" style=\"width: 100%;\"\n" + 
"      ng-model=\"searchFilter\" placeholder=\"Search...\" ng-change=\"updateOptions()\"/>\n" + 
"   </div>\n" + 
"  </li>\n" + 
"\n" + 
"  <li ng-show=\"showSearch\" class=\"divider\"></li>\n" + 
"  <li role=\"presentation\" ng-repeat=\"option in unselectedOptions | filter:search() | limitTo: searchLimit\"\n" + 
"   ng-if=\"!isSelected(option)\"\n" + 
"   ng-class=\"{disabled : selectionLimit && selectedOptions.length >= selectionLimit}\">\n" + 
"   <a class=\"item-unselected\" href=\"\" ng-click=\"toggleItem(option); $event.stopPropagation()\">\n" + 
"    {{getDisplay(option)}}\n" + 
"   </a>\n" + 
"  </li>\n" + 
"\n" + 
"  <li class=\"divider\" ng-show=\"selectionLimit > 1\"></li>\n" + 
"  <li role=\"presentation\" ng-show=\"selectionLimit > 1\">\n" + 
"   <a>{{selectedOptions.length || 0}}/{{selectionLimit}} selected</a>\n" + 
"  </li>\n" + 
"\n" + 
" </ul>\n" + 
"</div>"); 

}]）;

附上了我的指令编码，请给我解决方案如何添加占位一旦用户给指定默认文本中的指令调用的HTML标签或者选择标签

Answer 1

我觉得模板文件加载失败或模板URL可能错误。

更新与指令代码别人你的问题可以很容易地回答..