luận Pass để ng-nộp

Question

Tôi mới đến Angular, và tôi có hình thức đơn giản này:

<form ng-submit="add()"> 
    <input type="text" name="field"> 
    <input type="submit" value="Submit"> 
</form> 

Tôi muốn có giá trị input[name="field"] như một tham số của add(). Có cách nào để làm điều đó?

Điều tôi đã làm cho đến thời điểm này là chỉ định ng-model="field" trong mục nhập và trong add() tìm kiếm $scope.field.

Trong bộ điều khiển, tôi có một loạt các mục và chức năng add(). Các $scope.field được treo xung quanh như một bước trung gian để có được giá trị của đầu vào để add() mà tôi cần phải.

Tôi có thiếu thứ gì đó hay theo cách này của Angular?

Answer 1

Tôi sẽ sửa đổi câu trả lời của TheHippo một chút và vượt qua field làm đối số cho add(). Đây là một lựa chọn thiết kế mã hơn, nhưng tôi nghĩ nó mang tính linh hoạt hơn và thử nghiệm tốt hơn.

Html:

<div ng-controller="MyFormController"> 
    <form ng-submit="add(field)"> 
    <input type="text" name="field" ng-model="field" /> 
    <input type="submit" value="Submit" /> 
    </form> 
</div> 

JS:

app.controller('MyFormController', ['$scope', function(scope) { 
    scope.add = function(field) { // <-- here is you value from the input 
    // ... 
    }; 
}]); 

Và một lưu ý nhỏ: Nếu bạn làm theo nhất AngularJS hướng dẫn trực tuyến, nơi có một số danh sách được quản lý, và các mặt hàng mới được thêm vào mà danh sách, bạn sẽ hầu như luôn luôn nhìn thấy một trong những thuộc tính có xu hướng "treo xung quanh" (chúng thường được đặt tên là 'newItem' vv). Theo cách này, là cách AngularJS :)

Answer 2

Thực hiện một thay đổi nhỏ cho bạn HTML:

<form ng-submit="add()"> 
    <input type="text" name="field" model="field"> 
    <input type="submit" value="Submit"> 
</form> 

Trong bộ điều khiển (/ chỉ) chứa các hình thức:

app.controller('MyFormController', ['$scope', function(scope) { 
    scope.add = function() { 
    scope.field // <-- here is you value from the input 
    }; 
}]); 

Đây là đơn giản nhất và có ý định cách bạn có thể làm điều này trong góc cạnh.

Bạn có thể bắt đầu xem xét một chỉ thị/dịch vụ riêng sẽ làm những gì bạn muốn lưu trữ, nhưng tùy thuộc vào phần còn lại của mã, đây có thể là cách dễ nhất và ngắn nhất.

Answer 3

Tôi sẽ không nói đó là cách của Angular, nhưng nó là như thế nào, và tôi nghĩ rằng những gì tôi sắp nói với bạn.

Bạn có thể sử dụng form directive và chuyển giá trị của đầu vào cho phương thức add của mình. Thật không may ngForm yêu cầu bạn sử dụng ngModel, vì vậy nó là loại rửa.

http://jsfiddle.net/unsWy/

<div ng-app> 
    <form name="myForm" ng-submit="add(myForm.field.$viewValue)" ng-controller="x"> 
     <input type="text" ng-model="field" name="field" required> 
     <input type="submit" value="Submit"> 
    </form> 
</div>  

ngForm công trình tắt của tên trường, không tính mô hình của bạn, vì vậy nếu bạn muốn, bạn có thể sáng tạo với các ngModel chỉ thị trên đầu vào của bạn và giấu chúng đi để họ không phải "theo cách của bạn" để nói:

<input type="text" name="field" ng-model="$$ignore.field" required> 

Điều đó nói rằng, có lẽ bạn nên sử dụng phạm vi $ như dự định. :)

Answer 4

HTML:

<div ng-controller="MyFormController"> 
    <form ng-submit="add(field)"> 
    <input type="text" name="field" ng-model="field" /> 
    <input type="submit" value="Submit" /> 
    </form> 
</div> 

JS:

<script> 
function MyFormController($scope) { 
    $scope.add= function(field) { 
     alert(field) 
    } 
} 
</script> 

Lưu ý: nếu 'lĩnh vực' là một dấu ngoặc kép chuỗi sử dụng ng-nộp = "thêm ('lĩnh vực') "

Answer 5

Tôi không chắc chắn lý do. Nhưng tôi phải sử dụng 'điều này' để làm cho nó hoạt động.

Html:

<div ng-controller="MyFormController"> 
    <form ng-submit="add()"> 
    <input type="text" name="field" ng-model="field" /> 
    <input type="submit" value="Submit" /> 
    </form> 
</div> 

JS:

app.controller('MyFormController', ['$scope', function(scope) { 
    scope.add = function() { 
    console.log(this.field) // <-- this works for me 
    }; 
}]); 

Answer 6

alert (document.getElementById ("bar") giá trị.); trong điều khiển những điều này làm việc cho tôi thnks trong View-> html việc hình thành tôi

Answer 7

Đây là cách nó được thực hiện:

form.html

<form ng-submit="create(product)"> 
    <input ng-model="product.name" class="u-full-width" type="text" id="name"> 
    <input ng-model="product.price" class="u-full-width" type="number" id="price"> 
    <input class="button-primary" type="submit" value="Submit"> 
</form> 

controller.js

.controller('productCtrl', function($scope) { 
    $scope.create = function(product){ 
     console.log(product) 
    }; 
})