AngularJS: ng-model không ràng buộc với các hộp kiểm ng-check

Question 1

Tôi đã tham khảo điều này trước khi hỏi câu hỏi này.

AngularJs không ràng buộc ng-check với ng-model

Nếu ng-checkedđược đánh giá trueở htmlbên cạnh, ng-modelkhông được cập nhật. Tôi không thể ng-repeatnhư được đề xuất trong câu hỏi trên vì tôi phải sử dụng một số kiểu cho mỗi hộp kiểm.

Đây là plunker mà tôi đã tạo để minh họa vấn đề của mình.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Để xem những gì tôi muốn, vui lòng mở bảng điều khiển và chỉ cần nhấp vào Submitnút. Vui lòng không chọn bất kỳ hộp kiểm nào.

Cảm ơn trước!

Question 2

ngModelvà ngCheckedkhông được sử dụng cùng nhau.

ngCheckedđang mong đợi một biểu thức, do đó ng-checked="true", về cơ bản bạn đang nói rằng hộp kiểm sẽ luôn được chọn theo mặc định.

Bạn sẽ có thể chỉ sử dụng ngModel, gắn với thuộc tính boolean trên mô hình của bạn. Nếu bạn muốn thứ gì đó khác, thì bạn cần phải sử dụng ngTrueValuevà ngFalseValue(hiện chỉ hỗ trợ chuỗi) hoặc viết chỉ thị của riêng bạn.

Chính xác thì bạn đang cố gắng làm gì? Nếu bạn chỉ muốn hộp kiểm đầu tiên được chọn theo mặc định, bạn nên thay đổi mô hình của mình - item1: true,.

Chỉnh sửa: Bạn không phải gửi biểu mẫu của mình để gỡ lỗi trạng thái hiện tại của mô hình, btw, bạn chỉ có thể kết xuất {{testModel}}vào (hoặc <pre>{{testModel|json}}</pre>) HTML của mình . Ngoài ra, các ngModelthuộc tính của bạn có thể được đơn giản hóa thành ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

Question 3

Bạn có thể sử dụng ng-value-true để nói với góc rằng ng-model của bạn là một chuỗi.

Tôi chỉ có thể làm cho ng-true-value hoạt động nếu tôi thêm các dấu ngoặc kép như vậy (như được hiển thị trong tài liệu Angular chính thức - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D )

ng-true-value="'1'"

Question 4

Những gì bạn có thể làm là sử dụng việc ng-repeattruyền giá trị của bất kỳ thứ gì bạn đang lặp lại ng-checkedvà từ đó sử dụng ng-classđể áp dụng các kiểu của bạn tùy thuộc vào kết quả.

Tôi đã làm điều gì đó tương tự gần đây và nó đã hiệu quả với tôi.

Question 5

Có thể khai báo As trong ng-init cũng nhận được true

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

Và bạn có thể chọn đối tượng đầu tiên và đối tượng cũng được hiển thị ở đây true, false, flase

Question 6

Lệnh `ng-model`và lệnh `ng-checked`không nên được sử dụng cùng nhau

Từ Tài liệu:

ngChecked

Đặt thuộc tính đã kiểm tra trên phần tử, nếu biểu thức bên trong ngCheckedlà trung thực.

Lưu ý rằng chỉ thị này không nên được sử dụng cùng vớingModel , vì điều này có thể dẫn đến hành vi không mong muốn.

- Tham chiếu API chỉ thị được AngularJS kiểm tra

Thay vào đó, hãy đặt giá trị ban đầu mong muốn từ bộ điều khiển:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };

Question 7

Bạn không cần ng-checkedkhi bạn sử dụng ng-model. Nếu bạn đang thực hiện CRUD trên Biểu mẫu HTML của mình, chỉ cần tạo một mô hình cho CREATEchế độ phù hợp với EDITchế độ của bạn trong quá trình liên kết dữ liệu:

Chế độ CREATE: Mô hình chỉ có giá trị mặc định

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

Chế độ EDIT: Mô hình từ cơ sở dữ liệu

$scope.dataModel = getFromDatabaseWithSameStructure()

Sau đó, cho dù EDIThoặc CREATEchế độ, bạn có thể liên tục sử dụng của bạn ng-modelđể đồng bộ hóa với cơ sở dữ liệu của bạn.

AngularJS: ng-model không ràng buộc với các hộp kiểm ng-check

Lệnh ng-modelvà lệnh ng-checkedkhông nên được sử dụng cùng nhau

ngChecked

Chế độ CREATE: Mô hình chỉ có giá trị mặc định

Chế độ EDIT: Mô hình từ cơ sở dữ liệu

Lệnh `ng-model`và lệnh `ng-checked`không nên được sử dụng cùng nhau