angucomplete in einer form

Kann ich machen angucomplete Element in einem html-Formular? (in angular.js natürlich)

Was brauche ich um in selectedobject?

Versuchte diesen code, aber es nicht tut, was ich brauche, natürlich:

   <form class="form-horizontal" role="form" name="AddShareForm" novalidate ng-controller="AddArticleShareCtrl" ng-submit="AddShareForm.$valid && submit()">
        <div class="form-group">
            <label for="share-nick" class="col-xs-2 col-xl-2 control-label">User Nick</label>
            <div class="col-xs-10 col-xl-10">
                <angucomplete id="share-nick"
                              placeholder="User Nickname"
                              pause="100"
                              selectedobject="nick"
                              localdata="users"
                              searchfields="nick"
                              titlefield="nick"
                              minlength="1"
                              inputclass="form-control form-control-small"
                />
            </div>
        </div>
        <div class="form-group">
            <label for="share-content" class="col-xs-2 col-xl-2 control-label">Share content message</label>
            <div class="col-xs-10 col-xl-10">
                <input type="text" placeholder="content" id="share-content" ng-model="AddShareForm.content">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10">
                <button class="blue-button" type="submit" class="btn btn-default">Add</button>
            </div>
        </div>
    </form>

InformationsquelleAutor Boaz | 2014-10-03

angularjs forms

0

Müssen Sie nur angeben, ng-Modell.
http://plnkr.co/edit/q65Uyl?p=preview

Nur um deutlich zu machen, fügte ich eine submit-Funktion:
```
$scope.submit = function() {
  alert('About to submit [' + $scope.content + '] as ' + $scope.nick.title);
}
```
Und auch an die nick-Namen-message-Feld:
```
<div class="form-group">
    <label for="share-content" class="col-xs-2 col-xl-2 control-label">Share content message</label>
    <div class="col-xs-10 col-xl-10">
        <input type="text" placeholder="content" id="share-content" ng-model="content"> by <span>{{nick.title}}</span>
    </div>
</div>
```
Wenn Sie möchten mehr Funktionen, versuchen angucomplete-alt http://ghiden.github.io/angucomplete-alt/
- ja... das ist was ich am Ende machen (ich übersprang Sie das Formular und haben Sie es gerade nach vorne, das hat Nachteile). Auch schon eingeschaltet, um angucomplete-alt, weil bugs behoben, alt! Danke @ghiden
InformationsquelleAutor ghiden

Nach der Arbeit auf diesem für einige gute Länge der Zeit, die ich dachte, eine sehr gute Lösung zu anguautocomplete

In kurze Antwort selected-object könnte verwendet werden, als ein "Objekt", das man nutzen könnte, gegen die title-field - Attribut angeben, was bedeutet,

$scope.selectedObjectName.titleFieldValue

Alternativ selected-object könnte auch verwendet werden, als callback-Funktion wie unten, für den Verweis, ich werde auch HTML-Seite vor zu halten-mit JS.

<div angucomplete-alt id="idOfDiv" placeholder="" pause="400" selected-object="selectedObjectName" remote-api-handler="searchApiToCallForAutoCompleteOtions" remote-url-data-field="data" title-field="titleFieldValue" minlength="1" input-class="form-control form-control-small" initial-value="valueHoldingModel" match-class="highlight" field-required="false" input-name="anguCompleteFieldName" input-changed="anguCompleteInputChanged" ></div>

Gehen in die Umsetzung, wie sieht es in der JS..

$scope.selectedObjectName = function(selected){
if(selected){
  $scope.valueHoldingModel = selected.originalObject;
  $scope.$broadcast('angucomplete-alt:changeInput', idOfDiv, valueDisplay); 
  //you could have set with $scope.toWhereverYouWant = $scope.valueHoldingModel (warning below)
  //All other things you want to update/do while its selected-object is created
}else{
  $scope.valueHoldingModel = null; //This is if you want to clear the "non-selected" from angucomplete option, the object.
}

Fair-Warnung, $Umfang.valueHoldingModel, wenn verwendet, um zu bewegen zu einem anderen Modell bricht sofort nach, nicht sicher, warum hatte ich diese Erfahrung.
Was ich meine: $scope.iWantValuesHere = $scope.valueHoldingModel

Darüber hinaus werden leistungsstarke Dinge, die uns erlauben, zu erhalten eine größere Kontrolle über die Angucomplete Eingänge ist die input-changed - Attribut, das erlaubt uns zu halten, um eine Funktion wie..

$scope.anguCompleteInputChanged = function(str){
 console.log(str)
 if((str){
  $scope.valueHoldingModel.titleFieldValue = str; //More likely want to do.
  //and Anything else you want to do
 }else{
  $scope.valueHoldingModel = {} //This is somewhere you dont want to get, but will help fix if your object is undefined, following the first select "breaking" 
  $scope.valueHoldingModel.titleFieldValue = str;
 }
}

Nachdem erklärt, die meisten ausgeführt von das... das ist, was das remote-API-Aufruf für die anguComplete Optionen drop-down für die Auswahl genannt werden würde

$scope.searchApiToCallForAutoCompleteOtions = function(userInputString,timeoutPromise){
        return $http.post('http://my.domain.com:80/api/domain_block/api_specific/',{search_value: userInputString,token: $rootScope.user.token},{timeout: timeoutPromise});
    }

InformationsquelleAutor Mehdi

0

Sollten Sie in der Lage sein, es zu binden, um
```
selectedobject="AddShareForm.whatever"
```
Wenn das nicht funktioniert, dann würde ich ein hidden-input:
```
<input type="hidden" ng-model="whatever">
```
Und dann legen Sie das ausgewählte Objekt an, was die ng-model war:
```
selectedobject="whatever"
```
- versucht selectedobject="AddShareForm.nick", es habe keine Auswahl
InformationsquelleAutor dave

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.